监听滚动条滚动高度添加css样式

会飞的鱼

2022-05-02

3962

Css

$(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
var viewH = $(window).height(); //可见高度
var contentH = $(document).height(); //内容高度

     if(scroH>500){
         $('.backtotop').css('opacity',1)
    }else{
         $('.backtotop').css('opacity',0)
    }


    if(scroH >50){ //距离顶部大于100px时
        $(".header_nav").addClass('sc')
         $(".header_nav .main .right").addClass('ac')
    }
    if(scroH <50){ //距离顶部大于100px时
         $(".header_nav").removeClass('sc')
         $(".header_nav .main .right").removeClass('ac')
    }
    if(scroH >40){ //距离顶部大于100px时
         $(".header.hidden-xs").css('position','fixed')
         $(".header.hidden-xs").css('top','0')

    }
     if(scroH <40){ //距离顶部大于100px时
         $(".header.hidden-xs").css('position','unset')
         $(".header.hidden-xs").css('top','unset')
     }

});

上一页：jq监听向上滚动和向下滚动

无