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

2015-10-9 Jon
页面滚动时导航一直停留在顶部demo

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