headroom插件的使用

最新推荐文章于 2024-07-17 15:26:15 发布

churanlu1875

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量216

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3427060/blog/1555409

版权

正常情况下，按照官网就能完成，

特殊其情况是不是发生在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

churanlu1875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
headroom插件的使用

正常情况下，按照官网就能完成，特殊其情况是不是发生在Windows中的滚动，而是任意区域。 / 监听滚动事件的元素,默认为 `window` scroller : someElement, var myElement = document.querySelector("#bbc");...
复制链接

扫一扫