JS代码实现导航菜单栏随滚动条向下滚动时隐藏向上滚动时显示

投稿  龙笑天下 2016-09-12 阅读 247 次 评论 29 条

为了给浏览页面的用户提供更快捷、方便的导航,很多网站都提供了导航菜单栏随滚动条上下滚动的做法,以减少用户不必要的操作来提高网站用户粘度。并且很多的网站把导航条固定在网页的顶上,这样虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。

这个时候,我们就可以通过本文的方法(使用headroom.js),使我们的网页在向下方滚动的时候,顶部的导航条会自动收起来(隐藏);网页在向上方滚动的时候,顶部的导航条再自动出现(显示)。这样就能给我们的页面更多的空间,视野更加开阔。相应效果请滑动本页观察本站导航栏的变化!

headroom.js的工作原理是:通过感应目标元素不同的3种状态(原始,下滚,上滚),为目标元素更改相应的class,通过相应的class的css样式的变化得到所要的效果。

下面龙笑天下就介绍实现方法:

第一种方式(推荐)

首先,在footer中加载下面的js:

  1. <!-- 智能显示隐藏导航栏 http://www.ilxtx.com/auto-hide-navbar.html -->
  2. <script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script>
  3. <script>
  4.     (function() {
  5.     new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class
  6.         offset : 5, // 在元素没有固定之前,垂直方向的偏移量(以px为单位)
  7.             tolerance: 5, // scroll tolerance in px before state changes        
  8.         classes: {
  9.             initial: "animated",  // 当元素初始化后所设置的class
  10.             pinned: "slideUp"// 向上滚动时设置的class
  11.             unpinned: "slideDown" // 向下滚动时所设置的class
  12.         }
  13.     }).init();
  14.     }());
  15. </script>

然后,加上样式就over了:

  1. .animated {positionfixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
  2. .animated.slideDown {top: -100px;}
  3. .animated.slideUp {top: 0;}

其中的class要与上面js中的相对应!

第二种方式

首先,依次引入下面4个js,注意顺序别错了,严格遵守!

  1. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script  type="text/javascript"  src="https://npmcdn.com/headroom.js"></script>
  3. <script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>
  4. <script type="text/javascript">$(".navbar-fixed-top").headroom();</script>

其中,第一个jquery一般wordpress主题都带有了就可以不必再加载了;.navbar-fixed-top为导航栏的class(也可以是id)。

然后,在引入css就ok了:

  1. .headroom {positionfixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
  2. .headroom--unpinned {top: -100px;}
  3. .headroom--pinned {top: 0;}

下面再给个具体的例子,用editplus或其它编辑器保存为html网页,双击即可看效果。修改自@大学IT网

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap 101 Template</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <!-- Bootstrap -->
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="I:/webpage/animate/animate.css">
  9.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  10.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  11.     <!--[if lt IE 9]>
  12.         <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
  13.         <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
  14.     <![endif]-->
  15.     <style type="text/css">
  16.         .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
  17.         .headroom--unpinned {top: -100px;}
  18.         .headroom--pinned {top: 0;}
  19.     </style>
  20.     <style type="text/css">
  21.       .scrollspy-example {
  22.         height: 1200px;
  23.         overflow: auto;
  24.         position: relative;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <!-- 页眉大屏显示 -->
  30.     <div class="jumbotron">
  31.         <div class="container">
  32.             <h1>Hello, world!</h1>
  33.             <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  34.             <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
  35.         </div>
  36.     </div>
  37.     <div class="container">
  38.         <!-- 导航栏 -->
  39.         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="example">
  40.             <div class="navbar-header">
  41.               <a class="navbar-brand" href="#">w3school</a>
  42.             </div>
  43.             <div class="collapse navbar-collapse" id="tem">
  44.                 <ul class="nav navbar-nav">
  45.                     <li class="active"><a href="#php">PHP</a></li>
  46.                     <li><a href="#js">JS</a></li>
  47.                     <li class="dropdown">
  48.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">database<b class="caret"></b></a>
  49.                         <ul class="dropdown-menu">
  50.                             <li><a href="#mysql">MySQL</a></li>
  51.                             <li><a href="#pgsql">PostgreSQL</a></li>
  52.                             <li><a href="#mgdb">MogoDB</a></li>
  53.                         </ul>
  54.                     </li>
  55.                 </ul>
  56.             </div>
  57.         </nav>
  58.         <!-- 主体内容-->
  59.         <div data-spy="scroll" data-target="#example" data-offset="0" class="scrollspy-example">
  60.             <h4 id="php">PHP</h4>
  61.             <p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language. It is an HTML embedded scripting language and is especially suited for web development. The basic syntax of PHP is similar to C, Java, and Perl, and is easy to learn. PHP is used for creating interactive and dynamic web pages quickly, but you can do much more with PHP.
  62.              </p>
  63.             <h4 id="js">JS</h4>
  64.             <p>
  65.             JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created by Netscape programmer Brendan Eich. It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on the client side, It is mostly used for client-side web development.
  66.             </p>
  67.             <h4 id="mysql">MySQL</h4>
  68.             <p>
  69.             MySQL tutorial of w3cschool is a comprhensive tutorial to learn MySQL. We have hundreds of examples covered, often with PHP code. This helps you to learn how to create PHP-MySQL based web applications.
  70.             </p>
  71.             <h4 id="pgsql">PostgreSQL</h4>
  72.             <p>
  73.             In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National Science Foundation (NSF), and ESL, Inc sponsored Berkeley POSTGRES Project which was led by Michael Stonebrakessr. In 1987 the first demo version of the project is released. In June 1989, Version 1 was released to some external users. Version 2 and 3 were released in 1990 and 1991. Version 3 had support for multiple storage managers, an query executor was improved, rule system was rewritten. After that, POSTGRES has been started to be implemented in various research and development projects. For example, in late 1992, POSTGRES became the primary data manager for the Sequoia 2000 scientific computing project4. User community around the project also has been started increasing; by 1993, it was doubled.
  74.             </p>
  75.             <h4 id="mgdb">MongoDB</h4>
  76.             <p>
  77.             The term NoSQL was coined by Carlo Strozzi in the year 1998. He used this term to name his Open Source, Light Weight, DataBase which did not have an SQL interface.In the early 2009, when last.fm wanted to organize an event on open-source distributed databases, Eric Evans, a Rackspace employee, reused the term to refer databases which are non-relational, distributed, and does not conform to atomicity, consistency, isolation, durability - four obvious features of traditional relational database systems.
  78.             </p>
  79.             <p>
  80.             After reading the largest third party online MySQL tutorial by w3cschool, you will be able to install, manage and develop PHP-MySQL web applications by your own. We have a comprehensive, SQL TUTORIAL, which will help you to understand how to prepare queries to fetch data against various conditions.
  81.             </p>
  82.         </div>
  83.     </div>
  84.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  85.     <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  86.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  87.     <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  88.     <script  type="text/javascript"  src="https://npmcdn.com/headroom.js"></script>
  89.     <script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>
  90.     <script type="text/javascript">
  91.             $(".navbar-fixed-top").headroom();
  92.     </script>
  93.   </body>
  94. </html>

参考资料:

本文地址:http://boke112.com/3476.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
boke112导航的征稿启事及稿件要求

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. Canace
    Canace 【农民】 @回复

    不错

  2. Amals
    Amals 【镇长】 @回复

    有些日子没来了,再忙,随便看看,支持一下

  3. 你的名字
    你的名字 【镇长】 @回复

    WP怎么回复邮件通知?

  4. 捌零男人
    捌零男人 【镇长】 @回复

    试过几个,都不好用,干脆把这随滚效果去掉了,还省了一个JS调用

  5. 唯历史
    唯历史 【总理】 @回复

    提示有脚本错误

  6. 西狂
    西狂 【镇长】 @回复

    看示例HTML效果很棒,不光是滚动,点击完导航条上的项目导航条也会自动缩回去,但是导航条上的下拉菜单没有处理好,会一直展开着。

  7. 龙砚庭博客
    龙砚庭博客 【市长】 @回复

    [憨笑] 菜单栏滚动不滚动,有时真要跟主题布局结合,我是这样觉得的。

  8. 语约影评网
    语约影评网 【农民】 @回复

    先收藏起来,有机会再用,我也觉得移动导航栏做出来更有实用性。

  9. 小萝博客
    小萝博客 【市长】 @回复

    这个我要收藏起来

  10. 蚂蚁博客
    蚂蚁博客 【村长】 @回复

    想折腾的人又有福了。。。

  11. 大国小事
    大国小事 【农民】 @回复

    表示把雅兮网的,移动导航栏做出来更有实用性。

  12. 刘传鹏博客
    刘传鹏博客 【镇长】 @回复

    很棒

  13. 雅兮网
    雅兮网 【市长】 @回复

    方法一 样式表有误,老古处理一下

    • boke112导航
      boke112导航【站长】 @回复

      @雅兮网 [强] 看得真仔细,谢谢告知。PS:高亮代码转换经常有出现重名的情况

      • 雅兮网
        雅兮网 【市长】 @回复

        @boke112导航 知更鸟这个代码高亮感觉使用起来有些麻烦,还有些小问题

        • boke112导航
          boke112导航【站长】

          @雅兮网 用习惯了就好,就是偶尔会出现代码重名的现象。目前不想用插件实现高亮,还有其他更好的办法吗?

  14. 金榜台博客
    金榜台博客 【县长】 @回复

    这样用户用起来比较方便

  15. 南通SEO
    南通SEO 【镇长】 @回复

    现在发现都喜欢把导航搞到侧面去悬浮

  16. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    个人不喜欢导航栏悬浮,一直显示在上方,感觉很压抑。

  17. Koolight
    Koolight 【省长】 @回复

    引入了好多js文件,我用的主题载入的js已经有10个了,不忍直视啊。

  18. 用友软件
    用友软件 【镇长】 @回复

    js是个好代码

  19. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    最近的代码分享很给力呀!

  20. 细说往事
    细说往事 【镇长】 @回复

    认真写下去

  21. 爱时尚
    爱时尚 【市长】 @回复

    zblog可以用吗

    • 龙笑天
      龙笑天 【县长】 @回复

      @爱时尚 看到文中的demo了吗,不限于wordpress! [坏笑]
      PS:借此楼反馈下112博主,贵站的 地下三层 没有回复按钮,回复不了……….

      • boke112导航
        boke112导航【站长】 @回复

        @龙笑天 [偷笑] 因为我就设置了4层,所以到了地下三层就无法回复了。

        • 龙笑天
          龙笑天 【县长】

          @boke112导航 我记得在banyuner的博客上看到了解决方法,跟你这同样的问题~

  22. 李明
    李明 【市长】 @回复

    不错的效果。

  23. 麦林风博客
    麦林风博客 【队长】 @回复

    收藏了,这个有用