Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-sticky-nav with all npm packages installed. Try it out:

var vueStickyNav = require("vue-sticky-nav")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-sticky-nav v1.2.6

A mobile friendly sticky nav compontents for Vue.js

vue-sticky-nav

NPM version NPM Downloads NPM license

StickyNav会在页面到达导航条位置的时候吸顶,超过父容器高度后恢复

Demo

Live demo

install

npm/yarn

 yarn add vue-sticky-nav

Usage


//global
import StickyNav from 'vue-sticky-nav' 
Vue.use(StickyNav)

or:

//compontents
import {StickyNav} from 'vue-sticky-nav'  
<div class="parent">
    <StickyNav :options="stickyOptions"/>
    <!--custom contents-->
</div>

Options

    { 
        navs:['aa','bb','<a>cc</a>'], 
        selectionSelecotr:'sections', 
        showButton:false,
        scrollAnimate:true,
        scrollShow:false,
        disable:false,
        scrollDownHide:false
        zIndex:1000,
        stickyTop:-1,
        threshold:0,
    }
  • navs :数组、必填项,填写每一项的内容
  • sectionsSelecotr :导航内容的Class选择器,不需要加上.
  • showButton: 是否显示全部分类按钮,默认不显示
  • disabled : 是否禁用吸顶,默认是false
  • scrollAnimate : 导航滚动是否开启动画,默认是true
  • scrollShow: 是否滚动到楼层才展示,默认false
  • scrollDownHide: 是否向下滚动时隐藏,向上和静止时展示展示 默认false
  • zIndex : 层级,默认1000
  • stickyTop: 吸顶距离顶部的位置,默认-1
  • threshold: 到达内容之前多少像素则选中 默认0

methods

    <StickyNav :options="stickyOptions" 
                @changed="onchange" 
                @expand="expand"/>
methods:{
    //当前选中值改变时触发
    onchange(index){
        console.log(index);
    },
    //展开状态发生改变时触发,state:ture 展开,false 关闭
    expand(state){
    }
}

HTML Structure

    <div class="sticky-nav-container showAll">
         <!--设置了showButton后显示展开按钮-->
        <span class="stickyNav-expand" >
            <span class="icon-arrow"></span>
        </span>
        <div class="all-topbar">请选择分类</div>
        <!-- end-->
        <div class="sticky-nav">
            <ul>
                <li class="sticky-nav-item active"></li>
                <li class="sticky-nav-item"></li>
            </ul>
        </div>
        <!--展开后的-->
        <div class="sticky-nav-expand-panel">
            <ul>
                <li class="sticky-nav-item active"></li>
                <li class="sticky-nav-item"></li>
            </ul>
        </div>
       
    </div>

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free