jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码_js/jQuery

资料来源：网络整理时间：2023/3/4 0:56:37 共计：3610 浏览

之前已分享过一篇依赖jQuery的插件《jQuery 导航菜单、广告 —— 固定、置顶、跟随》，今天再来分享一个jQuery 智能判断跟随页面滚动的导航菜单的特效代码！

优势：不需要再定义置顶跟随后的位置，会智能判断！

代码分享：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 智能判断跟随页面滚动的导航</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<style>
 .nav_fixed{position:fixed;top:0;}
 #nav{margin-left: 100px;color: #f35;}
</style>
内容<br><br><br><br><br><br><br><br><br><br>
<div id="nav">这是要跟随的导航模块</div><!--这里是跟随代码-->
内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>内容<br><br><br><br><br><br><br><br><br><br>
<script>
 $(function(){  
    //获取导航距离页面顶部的距离  
    var toTopHeight = $("#nav").offset().top;  
      
    //监听页面滚动  
    $(window).scroll(function() {  
        //判断页面滚动超过导航时执行的代码  
        if( $(document).scrollTop() > toTopHeight ){  
            //检测是否为IE6。jQuery1.9中去掉了msie的方法，所以只好这样写  
            if ('undefined' == typeof(document.body.style.maxHeight)) {  
                //页面滚动的距离  
                var scrollTop = $(document).scrollTop();  
                //IE6下，用absolute定位，并设置Top值为距离页面顶部的距离  
                $("#nav").css({'position':'absolute','top':scrollTop+'px'});  
            }else{  
                //IE6以上浏览器采用fixed定位  
                $("#nav").addClass("nav_fixed");  
            }  
        }else{//判断页面滚动没有超过导航时执行的代码  
            if ('undefined' == typeof(document.body.style.maxHeight)) {  
                //设置Top值为导航距页面顶部的初始值。（IE6为了防止浏览器一下滚动过多，所以不能采用直接去掉定位的方法）  
                $("#nav").css({'position':'absolute','top':toTopHeight+'px'});  
            }else{  
                //IE6以上浏览器移除fixed定位，采用默认流布局  
                $("#nav").removeClass("nav_fixed");  
            }  
        }  
    });  
});
</script>
</body>
</html>

随着手机端网页越来越多，导航跟随更为重要，手机端的菜单就必须启用跟随才能提高用户体验，方便操作！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效_js/jQuery | ·下一条：float:left与position:relative，left:50%+left:-50%组合居中方法_CSS学习