vue-sticky-nav
StickyNav会在页面到达导航条位置的时候吸顶,超过父容器高度后恢复
Demo
install
npm/yarn
yarn add vue-sticky-nav
Usage
//globalVue
or:
//compontents<div class="parent"> <StickyNav :options="stickyOptions"/> <!--custom contents--></div>
Options
navs:'aa''bb''<a>cc</a>'selectionSelecotr:'sections'showButton:falsescrollAnimate:truescrollShow:falsedisable:falsescrollDownHide:falsezIndex:1000stickyTop:-1threshold:0
navs
:数组、必填项,填写每一项的内容sectionsSelecotr
:导航内容的Class选择器,不需要加上.
showButton
: 是否显示全部分类按钮,默认不显示disabled
: 是否禁用吸顶,默认是falsescrollAnimate
: 导航滚动是否开启动画,默认是truescrollShow
: 是否滚动到楼层才展示,默认falsescrollDownHide
: 是否向下滚动时隐藏,向上和静止时展示展示 默认falsezIndex
: 层级,默认1000stickyTop
: 吸顶距离顶部的位置,默认-1threshold
: 到达内容之前多少像素则选中 默认0
methods
<StickyNav :options="stickyOptions"@changed="onchange"@expand="expand"/>
methods://当前选中值改变时触发{console;}//展开状态发生改变时触发,state:ture 展开,false 关闭{}
HTML Structure
<!--设置了showButton后显示展开按钮-->请选择分类<!-- end--><!--展开后的-->
License
MIT