Scrollnav 锚点导航

使用说明 PLUGIN

scrollnav是github上很受欢迎的锚点滚动插件，没有任何依赖，详见github或scrollnav官网。本框架在v3.0.2版本基础上进行了些许修改，以保持风格统一，修改内容如下:

插件中的样式均增加ax-前缀，样式中的下划线_均替换为了短横线-。
支持两级锚点菜单，分别是h2和h3。
修改了默认参数insertLocation为append。

该插件不支持IE浏览器，包括IE6~11。

纵向滚动菜单

使用ax-scrollnav-v类表示右侧垂直滚动菜单，菜单位置可以通过附加样式自定义。下面列举插件常用参数：

sections：是指一级菜单的选择器，默认是h2。
subSections：是指二级菜单的选择器，默认是h3。
insertTarget：是指菜单插入到哪个选择器里，必填项。

对纵向滚动菜单已经集成了cookie功能，也就是说当通过按钮打开或关闭菜单之后刷新之后会保持原有show或hide状态。

<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/scrollnav/scrollnav.min.js"></script>
<script type='text/javascript'>
var article01 = document.querySelector('#article01');
        var articlenav01 = document.querySelector('#article-nav01');
        scrollnav.init(article01, {
            insertTarget:articlenav01,
        });
</script>

                                     <div class="ax-scrollnav-v" id="article-nav01"></div>
                                     <div id="article01">
                                        <h2></h2>
                                        ...
                                        <h2></h2>
                                        ...
                                        <h2></h2>
                                        ...
                                     </div>

横向滚动菜单

借助sticky.js粘住插件，将横向锚点菜单固定在顶部。该插件的详细用法在这里。

<script src='../src/plugins/scrollnav/scrollnav.min.js'></script>
<script src='../src/plugins/sticky/jquery.sticky.min.js'></script>
<script >
    $("#article-nav02").sticky({ topSpacing: 0 ,widthFromWrapper:false,zIndex:2});
    var article02 = document.querySelector('#article02');
    var articlenav02 = document.querySelector('#article-nav02');
    scrollnav.init(article02, {
        insertTarget:articlenav02,
        subSections:'',
    });
</script>

                                     <div class="ax-scrollnav-h" id="article-nav02"></div>
                                     <div id="article02">
                                        <h2></h2>
                                        ...
                                        <h2></h2>
                                        ...
                                        <h2></h2>
                                        ...
                                     </div>

重要提示

本插件在同一个页面只能使用一次。