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

之前已分享过一篇依赖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>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！