headroom插件的使用
生活随笔
收集整理的這篇文章主要介紹了
headroom插件的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
正常情況下，按照官網就能完成，
特殊其情況是不是發生在Windows中的滾動，而是任意區域。
/ 監聽滾動事件的元素,默認為 `window` scroller : someElement, var myElement = document.querySelector("#bbc");scroller: myElement,document.querySelector("#bbc"); 方法獲取該節點元素，和$("#bbc"),不一樣。
我的靜態實例
<style type="text/css">.headroom--unpinned {position: fixed;z-index: 10;right: 0;left: 0;top: 0; } .headroom--not-top.headroom--not-bottom.headroom--pinned{position: fixed;z-index: 10;right: 0;left: 0;top: 0; } .scrollspy-example { height: 1200px; overflow: auto; position: relative; } </style> </style><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!-- <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> --><script src="https://cdn.bootcss.com/headroom/0.9.4/headroom.js"></script><script src="https://cdn.bootcss.com/headroom/0.9.4/jQuery.headroom.js"></script><script>$(function() {var myElement = document.querySelector("#bbc");$("#bbbx").headroom({offset : 20,classes: {// when element is initialised//initial: "x1",// when scrolling up//pinned: "x2",// when scrolling down//unpinned: "x3",// when above offset//top: "x4",// when below offset//notTop: "x5",// when at bottom of scoll area//bottom: "x6",// when not at bottom of scroll area//notBottom: "x7"},scroller : myElement, })console.log($(window).height());})</script> </head><body><div id="bbbs" style="height:120px;width:100%;background:pink;"></div> <div id="bbc" style="height:600px;width:100%;background:#ddd;overflow: auto;"><div id="" style="height:2000px;width:100%;background:#9E9191;"><div id="bbbx" style="height:200px;width:100%;background:red;"></div></div></div> </body></html>下面是教程
中文：http://www.ijquery.cn/?p=1353
官網：http://wicky.nillia.ms/headroom.js/
????????https://github.com/WickyNilliams/headroom.js/
一個插件分開使用new:https://codepen.io/netgloo/pen/KmGpBL
報錯;headroom.js this.scroller.addEventListener is not a function
轉載于:https://my.oschina.net/u/3427060/blog/1555409
總結
以上是生活随笔為你收集整理的headroom插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu 修改tomcat端口
- 下一篇： 导航 headroom详细使用方法