当前位置:主页 > JavsScript库 > 其它 >

最小粘性元素库 - sticky.js
栏目分类:其它   发布日期:2021-09-15   浏览次数:

一个最小的粘性元素 JavaScript 类,可以在向下滚动页面时将元素固定在顶部。

使用:

1. 创建一个应该在滚动时具有粘性的元素。

<div id="stickyDemo" class="stickyDemo">
  Sticky Element
</div>

2. 将元素粘贴到页面顶部。

#stickyDemo.sticky {
  position: fixed;
  top: 50px;
  left: 0px;
  right: 0;
  margin: auto;
  z-index: 1;
}

3. 在页面上包含sticky.js JavaScript 库。

<script src="sticky.js"></script>

4. 将函数附加Sticky到元素并完成。边界参数允许您指定粘性元素在卡住时应附加到的边界。

let stickyDemo = document.getElementById('stickyDemo');
let boundaryDemo = document.getElementById('boundaryDemo');
let stickyObjDemo = new Sticky(stickyDemo, boundaryDemo);

5. 使元素在容器内具有粘性(例如父容器)。

let stickyDemo = document.getElementById('stickyDemo');
let boundaryDemo = document.getElementById('boundaryDemo');
let stickyViewportDemo = document.getElementById('stickyViewportDemo');
let stickyObjDemo = new Sticky(stickyDemo, boundaryDemo, stickyViewportDemo, true);

官方网站:https://github.com/danieljkahn/sticky

相关热词: sticky.js粘性元素库

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库