當前位置：
首頁 >
导航 headroom详细使用方法
發(fā)布時間：2024/3/24
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
导航 headroom详细使用方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
headroom官網(wǎng)(中文版)：http://www.bootcss.com/p/headroom.js/
headroom官網(wǎng)(國外版)：http://wicky.nillia.ms/headroom.js/
headroom在線使用地址：https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js
headroom–Playroom:http://wicky.nillia.ms/headroom.js/playroom/
##想實現(xiàn)這樣的效果嗎（當頁面向下滾動時，導航條消失，當頁面向上滾動時，導航條就出現(xiàn)了。）
那就先實現(xiàn)這樣的效果吧
一 . 簡單的headroom使用
1.使用純JS來寫
HTML部分
<div class="header" id="header"></div><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1>CSS部分
<style>.header{width:100%;height: 60px;background-color: red;}/* headroom改變時不同的樣式 ，可以自由設(shè)置*/.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}.headroom--unpinned {top: -100px;}.headroom--pinned {top: 0;}</style>JS部分
<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script> <!--注意：js一定要寫在body的后面，因為要使用body里面的元素 --> <script>var myElement = document.querySelector("#header");var headroom = new Headroom(myElement);headroom.init(); </script>完整代碼
<html> <head><meta charset="utf-8" /><script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script><style>.header{width:100%;height: 60px;background-color: red;}/* headroom改變時不同的樣式 ，可以自由設(shè)置*/.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}.headroom--unpinned {top: -100px;}.headroom--pinned {top: 0;}</style> </head> <body><div class="header" id="header"></div><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1>....... </body><!--注意：js一定要寫在body的后面，因為要使用body里面的元素 --> <script>var myElement = document.querySelector("#header");var headroom = new Headroom(myElement);headroom.init(); </script> </html>2.使用JQuery來寫
HTML和CSS部分沒有變化
JS部分
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="headroom.js"></script><script type="text/javascript" src="jQuery.headroom.js"></script><!--注意：js一定要寫在body的后面，因為要使用body里面的元素 --><script>$("#header").headroom();</script>二 . 實現(xiàn)不同效果的的animate
到headroom.js中修改Headroom.options
(原始版)
Headroom.options = {tolerance : {up : 0,down : 0},offset : 0,scroller: window,classes : {pinned : 'headroom--pinned',unpinned : 'headroom--unpinned',top : 'headroom--top',notTop : 'headroom--not-top',bottom : 'headroom--bottom',notBottom : 'headroom--not-bottom',initial : 'headroom'}};（修改版）
Headroom.options = {tolerance : {up : 0,down : 0},offset : 0,scroller: window,classes : {pinned : 'bounceInDown',unpinned : 'bounceOutUp',top : 'headroom--top',notTop : 'headroom--not-top',bottom : 'headroom--bottom',notBottom : 'headroom--not-bottom',initial : 'animated'}};修改classes中的參數(shù)，然后對照使用CSS即可
三.結(jié)語
第二大點有不正確的地方還希望大家多多指教，希望和志同道合的朋友一起學習
總結(jié)
以上是生活随笔為你收集整理的导航 headroom详细使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql vip的作用_MySQL-M
- 下一篇： 关于FFmpeg VMAF 的一些记录