腾讯云服务器优惠活动华纳云香港服务器
boke112百科 » WordPress » 正文

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

龙笑天下更新于 2016-09-12 14:30:46首发于 2016-09-12 07:32:484.96K
WordPress主题推荐

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

这个时候，我们就可以通过本文的方法（使用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/[email protected]/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 {position: fixed;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 {position: fixed;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>

参考资料：

赞 (0) 打赏
版权声明：本文为投稿文章，感谢 龙笑天下 的投稿，版权归原作者所有！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请联系我们，确认后马上更正或删除，谢谢！
标签

相关文章

最新文章

免备案外贸虚拟主机SiteGround

热门标签

Copyright © boke112百科基于 WordPress + YIA 构建桂ICP备14004711号-3anbei桂公网安备 45010502000016号
wu