elevator-nav v1.0.4

电梯导航组件

demo效果预览：https://zhouxingzu.github.io/elevator-nav/

使用方法

一、安装

npm install elevator-nav

二、引入使用：

// html

<div class="floor1">Floor1</div>
<div class="floor2">Floor2</div>
<div class="floor3">Floor3</div>
<div class="footer">Footer</div>

<div class="left-nav">
    <ul class="nav-ul">
        <li class="nav-item">Floor1</li>
        <li class="nav-item">Floor2</li>
        <li class="nav-item">Floor3</li>
        <li class="toTop">回到顶部</li>
    </ul>
</div>

// js
import ElevatorNav from 'elevator-nav';

var nav = new ElevatorNav({
    floorClass: ['floor1','floor2','floor3'],  //对应楼层的class名
    navClass: "nav-item",   //电梯菜单的class名
    activeClass: "active",  //当前楼层高亮状态的class名
    toTopClass: "toTop",    //回到顶部的class名
})

注：由于项目依赖jquery，所以请在渲染出DOM元素后再进行初始化

三、详细API文档说明

例如：

var nav = new ElevatorNav({
    floorClass: ['floor1','floor2','floor3','floor4'],  //楼层的class名
    navClass: "nav-item",  //电梯菜单的class名
    activeClass: "active",  //状态高亮的class名
    toTopClass: "toTop",    //回到顶部的class名
    scrollContent: 'content',  //滑动容器的class名
    isRemoveAnimation: true,    //是否移除类名随点击跟着跑的效果，默认为false
    autoHidden: true,   //是否隐藏菜单，滑到第一层才出现，默认为false
    navDivClass: "left-nav",    //需要默认隐藏菜单的class名
    speed: 500,     //滚动速度，默认为500
    diyFun: function(){
        console.log('自定义方法');
    }
})