Notable Pastry Maker

    navbar-builder

    1.4.2 • Public • Published

    常见的锚点定位页面位置--页面位置滚动联动锚点的插件

    使用

    1. 比如导航为:语文 数学:

      <div class="sidebar">
          <a href="#yuwen">语文</a>  
          <a href="#shuxue">数学</a> 
          <a href="#gotop">回到顶部</a>
      </div>
    2. 需要有对应ID的html元素,比如:

      <div id="gotop"></div>
      <div id="yuwen"></div>  
      <div id="shuxue"></div>
    3. js代码:

      var buildBar = require('navbar-builder'); 
      buildBar({
         "anchors": ['gotop', 'yuwen', 'shuxue'],
         "activeClass": 'active',
         "autoHide": true,
         "autoHideThreshold": 200,
         "useFade": false,
         "sideBar": $(".sidebar")
      });

    options

    名称 是否必须 描述
    anchors 必须 锚点列表数组
    注意:锚点列表数组必须按位置从上到下的顺序排列
    activeClass 可选 当前锚点的class,默认为active
    autoHide 可选 整个导航区域,是否是自动显示隐藏的。适合导航栏在右侧的情况,默认隐藏,往下滚动200px后显示
    autoHideThreshold 可选 往下滚动多少后进行显示
    useFade 可选 是否用fadeIn和fadeOut进行显示,默认false(用show()和hide())
    sideBar 可选 导航的容器元素。默认为$('.sidebar')

    依赖jquery

    但项目中可能已经引入了jquery,所以不做硬性引入,以免版本不同造成的冲突。使用时请自行添加依赖

    实现效果

    1.点击锚点,页面可以滚动

    2.页面滚动到某个位置时,其对应的导航将高亮(默认加上active的class)

    示例界面

    http://jsblog.cc/demo/ab/

    有问题请联系:zhen0578@qq.com

    Install

    npm i navbar-builder

    DownloadsWeekly Downloads

    4

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    7.89 kB

    Total Files

    6

    Last publish

    Collaborators

    • waitkafuka