當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

headroom.js插件使用方法

發(fā)布時(shí)間：2023/12/10 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 headroom.js插件使用方法小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.什么是headroom.js？

headroom是用純Javascript寫的插件，用來隱藏和展示頁面元素，從而為頁面留下更多空間。比如使用headroom能使導(dǎo)航欄當(dāng)頁面下滾時(shí)消失，當(dāng)頁面上滾時(shí)候又出現(xiàn)。（查看效果）

2.工作原理

通過感應(yīng)目標(biāo)元素不同的3種狀態(tài)（原始，下滾，上滾），為目標(biāo)元素更改相應(yīng)的class，通過相應(yīng)的class的css樣式的變化得到所要的效果。

3.如何使用

（以下的例子是基于bootstrap框架和jquery插件的，在bootstrap框架下可以快速寫出導(dǎo)航欄navbar，然后以jquery插件方式對(duì)導(dǎo)航欄navbar調(diào)用headroom()。）

首先需要引用headroom.js和jQuery.headroom.js。將以下的代碼加入到你的代碼中。headroom.js作用：感應(yīng)元素不同的狀態(tài)為之更改相應(yīng)的class。jQuery.headroom.js作用：提供jquery插件方式和Data-API方式調(diào)用headrooom()。

因?yàn)閔eadroom()函數(shù)傳入的參數(shù)option對(duì)象的默認(rèn)值如下。

{// 在元素沒有固定之前，垂直方向的偏移量（以px為單位）offset : 0,// scroll tolerance in px before state changestolerance : 0,// 對(duì)于每個(gè)狀態(tài)都可以自定義css classes classes : {// 當(dāng)元素初始化后所設(shè)置的classinitial : "headroom",// 向上滾動(dòng)時(shí)設(shè)置的classpinned : "headroom--pinned",// 向下滾動(dòng)時(shí)所設(shè)置的classunpinned : "headroom--unpinned"} }

由此可知原始的狀態(tài)對(duì)應(yīng)的class是headroom，下滾時(shí)的class是headroom--pinned，上滾時(shí)的class是headroom--unpinned。所以我們要添加下面的樣式，通過css的trasition屬性達(dá)到變換效果。

之后添加下面的js代碼，使用jquery插件的方式調(diào)用。".navbar-fixed-top"只是用來獲取導(dǎo)航欄navbar，也可以用其他選擇器來獲取navbar目標(biāo)元素

做完了上述步驟，理論上你就可以看到headroom的效果了，如果沒有成功可能是以下的原因：

1、js的引用順序錯(cuò)誤，因?yàn)橐恍﹋s要用到其他js才能運(yùn)行的，所以必須放在其他的js之后。例如

必須放在headroom.js和jQuery.headroom.js之后，而headroom.js和jQuery.headroom.js必須放在jQuery.js之后。

2、將$(".navbar-fixed-top").headroom(); 放在主體html代碼之前，如放在<head></head>中，因?yàn)樵谥黧whtml代碼之前，navbar元素還沒加載就調(diào)用了headroom()，所以無效。應(yīng)該用以下代碼替換之，表示等文檔加載完畢再調(diào)用。

上述的效果只是通過css自帶的trasition屬性來實(shí)現(xiàn)效果，比較單調(diào)。不過可以結(jié)合animate.css實(shí)現(xiàn)更多的漂亮的消失和出現(xiàn)的效果。（查看效果）

animate.css使用純css為各種元素實(shí)現(xiàn)不同的動(dòng)畫效果，每一種class對(duì)應(yīng)一種動(dòng)畫效果，所以將animate.css引入代碼后headroom()可以直接使用已經(jīng)寫好的class。（animate.css下載）

我基于bootstrap和jquery寫得例子。

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  7 <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> 8 9 <link rel="stylesheet" href="I:/webpage/animate/animate.css"> 10 11  12  13  17 <style type="text/css"> 18 .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;} 19 .headroom--unpinned {top: -100px;} 20 .headroom--pinned {top: 0;} 21 </style> 22 23 <style type="text/css"> 24 .scrollspy-example { 25 height: 1200px; 26 overflow: auto; 27 position: relative; 28 } 29 </style> 30 31 32 </head> 33 <body> 34 35  36 <div class="jumbotron"> 37 <div class="container"> 38 <h1>Hello, world!</h1> 39 <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> 40 <p><a class="btn btn-primary btn-lg" role="button">Learn more ?</a></p> 41 </div> 42 </div> 43 44 <div class="container"> 45 46  47 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="example"> 48 <div class="navbar-header"> 49 <a class="navbar-brand" href="#">w3school</a> 50 </div> 51 52 <div class="collapse navbar-collapse" id="tem"> 53 <ul class="nav navbar-nav"> 54 <li class="active"><a href="#php">PHP</a></li> 55 <li><a href="#js">JS</a></li> 56 <li class="dropdown"> 57 <a href="#" class="dropdown-toggle" data-toggle="dropdown">database<b class="caret"></b></a> 58 59 <ul class="dropdown-menu"> 60 <li><a href="#mysql">MySQL</a></li> 61 <li><a href="#pgsql">PostgreSQL</a></li> 62 <li><a href="#mgdb">MogoDB</a></li> 63 </ul> 64 </li> 65 </ul> 66 </div> 67 </nav> 68 69  70 <div data-spy="scroll" data-target="#example" data-offset="0" class="scrollspy-example"> 71 <h4 id="php">PHP</h4> 72 <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. 73 </p> 74 <h4 id="js">JS</h4> 75 <p> 76 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. 77 </p> 78 <h4 id="mysql">MySQL</h4> 79 <p> 80 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. 81 </p> 82 <h4 id="pgsql">PostgreSQL</h4> 83 <p> 84 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. 85 </p> 86 <h4 id="mgdb">MongoDB</h4> 87 <p> 88 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. 89 </p> 90 <p> 91 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. 92 </p> 93 94 </div> 95 </div> 96 97 98  99 <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 100  101 <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> 102 103 104 <script type="text/javascript" src="https://rawgithub.com/WickyNilliams/headroom.js/master/dist/headroom.js"></script> 105 106 <script type="text/javascript" src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script> 107 108 <script type="text/javascript"> 109 110 $(".navbar-fixed-top").headroom(); 111 112 </script> 113 114 115 </body> 116 </html>

原文地址:http://blog.csdn.net/chenyulearn/article/details/19606751

?

轉(zhuǎn)載于:https://www.cnblogs.com/ccode/p/3905922.html

總結(jié)

以上是生活随笔為你收集整理的headroom.js插件使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： apache phoenix 入门_实现
下一篇：软件体系结构建模