Scrollnav 锚点导航

使用说明 PLUGIN

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

  • 插件中的样式均增加ax-前缀,样式中的下划线_均替换为了短横线-
  • 支持两级锚点菜单,分别是h2h3
  • 修改了默认参数insertLocationappend
该插件不支持IE浏览器,包括IE6~11。

纵向滚动菜单

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

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

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

  • <script type="text/javascript" src="https://src.axui.cn/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>
                                        
重要提示
本插件在同一个页面只能使用一次。