简要教程
Sticksy.js是一款jQuery滚动固定侧边栏元素插件。该插件可以在页面滚动时,将任意元素固定在页面的可视区域中,跟随页面一起滚动。
使用方法
安装
npminstallsticksy--save
yarnaddsticksy
HTML结构
<asideclass="sidebar">
<!--Nonstickyelement-->
<divclass="widget"></div>
<!--Stickyelement-->
<divclass="widgetis-sticky"></div>
<!--Now,thenextelementsarestickyalso-->
<divclass="widget"></div>
<divclass="widget"></div>
</aside>
初始化插件
varstickyElement=newSticksy('.widget.is-sticky');
作为jQuery插件使用。
varstickyElement=$('.widget.is-sticky').sticksy();
API
varinstance=newSticksy(target[,options]);
//demo
varstickyEl=newSticksy('.block.is-sticky',{
topSpacing:60,//Specifythiswhenyouhaveafixedtoppanel
listen:true,//ListenfortheDOMchangesinthecontainer
});
可用的配置参数如下:
topSpacing:指定元素被固定时,距离页面顶部的距离。默认为0。
listen:是否监听dom元素的变化。默认为false。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery