jquery点击添加class，实现滚动监听

最新推荐文章于 2023-02-09 17:44:46 发布

yan7_7

最新推荐文章于 2023-02-09 17:44:46 发布

阅读量2.9k

点赞数

分类专栏：笔记文章标签： jquery class 函数

本文链接：https://blog.csdn.net/yan7_7/article/details/50216823

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery实现点击添加class

$('.silder_bar').children().click(function(){
    if($(this).hasClass('active')){
    }else{
        $(this).addClass('active');
    }
    if($(this).siblings().hasClass('active')){
        $(this).siblings().removeClass('active');
    } 
})

jquery实现滚动监听

$(window).scroll(function(){  
      var htmlHeight=$(window).height()
      var scrollTop=$(window).scrollTop();
      //console.log(htmlHeight);
      //console.log(scrollTop);
      if(scrollTop<htmlHeight){
          $('.silder_bar>a:eq(0)').attr('class','active');
          $('.silder_bar>a:eq(0)').siblings().removeClass('active');
      }if(scrollTop>htmlHeight&&scrollTop<2*htmlHeight){  
          $('.silder_bar>a:eq(1)').attr('class','active');
          $('.silder_bar>a:eq(1)').siblings().removeClass('active');
      }if(scrollTop>2*htmlHeight&&scrollTop<3.8*htmlHeight){
          $('.silder_bar>a:eq(2)').attr('class','active');
          $('.silder_bar>a:eq(2)').siblings().removeClass('active');
      }if(scrollTop>3.8*htmlHeight&&scrollTop<4.8*htmlHeight){
          $('.silder_bar>a:eq(3)').attr('class','active');
          $('.silder_bar>a:eq(3)').siblings().removeClass('active');
      }if(scrollTop>4.8*htmlHeight&&scrollTop<5.8*htmlHeight){
          $('.silder_bar>a:eq(4)').attr('class','active');
          $('.silder_bar>a:eq(4)').siblings().removeClass('active');
      }if(scrollTop>5.8*htmlHeight){
           $('.silder_bar>a:eq(5)').attr('class','active');
           $('.silder_bar>a:eq(5)').siblings().removeClass('active');      
      }
    )