滚动条超过一定距离, 导航栏悬浮在最上方

Posted xc_flying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动条超过一定距离, 导航栏悬浮在最上方相关的知识,希望对你有一定的参考价值。

window.onload = function(){
    var tabTop = $("#tab_demo .tabBar").offset().top;
    $(".Hui-article").scroll(function(){
        var currentTop = $(this).scrollTop()+94;
        console.log(currentTop+":"+tabTop);
        if(currentTop >= tabTop){
            var topVal = currentTop - tabTop;
            $("#tab_demo .tabBar").css({
                "position":"relative",
                "top":topVal+"px",
                "left":"0",
                "z-index":"11111",
                "width":"100%",
                "background":"#fff"
            });
        }else{
            $("#tab_demo .tabBar").css({
                "position":"static"
            });
        }
    });
}

  

实现滚动条超过一定距离, 导航栏悬浮在最上方的功能。

以上是关于滚动条超过一定距离, 导航栏悬浮在最上方的主要内容,如果未能解决你的问题,请参考以下文章

html导航栏悬浮在最右边

我用css定位了导航,怎么当网页下拉到一定高度的时候变成悬浮的?

垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部

滚动页面一定距离后固定导航条

BootStrap有用代码片段(持续总结)

2017-04-10js来控制导航栏在滚动条拉到一定位置时显示