页面滚动元素定位特效

最后更新: 2023-05-25 浏览次数: 700

粘性定位特效(sticky)

当页面滚动时,可以让元素在滚动过程中“粘”在屏幕上的某个位置，当滚动区域大于目标元素区域时，目标元素将粘贴在页面固定位置不再随页面滚动(fixed状态)，反之则随页面滚动(static状态)，sticky只能实现定位，无法实现定位的同时，附加相应的样式变化。

系统通过为指定的元素添加属性：data-stick="css name" 方式实现定位的同时，附加相应的CSS样式

<div class="menu" data-sticky="sticky-nav">导航</div>

相应的写法可通过演示页面源代码查看

当页面滚动时，即开始为指定了data-fixed属性的元素附加css样式，

属性名	属性值	必须	说明
data-fixed	fix-effect	是	属性值为css class样式名称,可自定义
data-offset	0	否	页面滚动偏移距离(px)后开始执行燕式,不指定则一旦滚动后立即执行
data-delay	0	否	效果延迟执行时间(毫秒)，不指定则不延迟
data-scroll	fix-switch	否	页面上下滚动时的交互样式，自自定义

<div class="nav-header" data-fixed="fixed-menu">导航菜单</div>

<div class="container" data-fixed="container-effect" data-delay="200">导航菜单</div>