码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-06 13:14:43      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:relative   javascrip   val   dem   导航   功能   article   position   top   

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"
            });
        }
    });
}

  

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

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

标签:relative   javascrip   val   dem   导航   功能   article   position   top   

原文地址:http://www.cnblogs.com/xie-xiao-chao/p/7991907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!