页面滚动时导航一直停留在顶部demo

2015-10-9 Jon js+jquery+ajax

页面滚动时导航一直停留在顶部demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>页面滚动时导航一直停留在顶部</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <style>
        *, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-text-size-adjust: none;}
        .clearfix:before, .clearfix:after {display: table;content: " ";}
        .clearfix:after {clear: both;}
        .clearfix {*zoom: 1;}
        .lf {float: left;}
        .rf {float: right;}
        ul,li{list-style: none;}
        body{margin:0;}
        .container2{
          width: 90%;
          margin:0 auto;
        }
        .header,.footer{height:200px;background: #343434}
        .content{height:2100px;background: #ccc;}
        .banner-bott{
          width:100%;
          line-height: 50px;
          background:rgba(0,0,0,.4);
          position: absolute;
          font-size: 22px;
        }
        .banner-bott li{width:25%;float:left;}
        .banner-bott li a{display: block;text-align: center;color:#fff;text-decoration: none}
        .banner-bott.f-top-show {top:0;position: fixed;}
      </style>
    </head>
    <body>
      <div class="header"></div>
      <div class="banner-bott">
        <ul class="container2 clearfix">
          <li><a href="javascript:;">好雨知时节</a></li>
          <li><a href="javascript:;">当春乃发生</a></li>
          <li><a href="javascript:;">随风潜入夜</a></li>
          <li><a href="javascript:;">润物细无声</a></li>
        </ul>
      </div>
      <div class="content"></div>
      <div class="footer"></div>
      <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
      <script>
        // 导航置顶
        $(function() {
            var $nav=$('.banner-bott');
            var nav_top = $nav.offset().top;
            function navShow(){
              var scrollTop = parseInt($(window).scrollTop());
              if (scrollTop > nav_top) {
                if (!$nav.hasClass('f-top-show')) {
                  $nav.addClass("f-top-show");
                }
              } else {
                if ($nav.hasClass('f-top-show')) {
                  $nav.removeClass("f-top-show");
                }
              }
            }
            $(window).scroll(function() {
              navShow()
            });
            navShow();
        });
      </script>
    </body>
    </html>

您可以修改框中代码后运行查看

标签: 置顶

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇纯css实现兼容很好的点击看大图实例
上一篇图片水平垂直都居中，兼容ie7及以上和主流浏览器

发表评论：

知向前端

页面滚动时导航一直停留在顶部demo

页面滚动时导航一直停留在顶部demo

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档