网站大全页面滚动导航菜单跟随切换_百科目录导航树小插

作者: 健隆 分类: 前端 发布时间: 2020-01-20 08:48

青岛门户网站：青岛政务网、人力资源和社会保障局、青岛新闻网、半岛网、青岛之窗
青岛娱乐网站：半岛娱乐频道、新闻网娱乐频道、华夏娱乐
青岛体育网站：青岛体育信息网、青岛大学体育学院、体育局、青岛网络广播电台体育频道

先介绍一下造轮子的背景:前几天给客户设计原型，是关于一个步骤数据展示及打分的页面，客户可以在此页面上看到APP端配置的工作步骤以及采集到的数据，可以分别给每个步骤打分，在设计的时考虑到一般情况下APP端配置的工作步骤比较多，Web后台进行展示的时候页面会非常长，用户在查看数据及评分的过程中可能会不清楚自己评了几个步骤，还剩下几个步骤未打分，所以想在页面中设计一个类似于导航的东西，通过这个导航可以很清晰直观的看到当前正在浏览的是哪个步骤，同时也可以点击自己感兴趣的步骤直接滚动到该步骤的内容区域。当时灵光一闪，想到了百度百科右侧的目录导航树，不如就用这个效果吧，基本满足自己所想的效果，所以就按照这个效果画了一个原型页面跟客户确认，客户也挺满意的，原型确定之后，任务也就开始了。就先从这个导航树开始吧，从可维护性和复用角度考虑，当时就想直接封装一个插件吧，在功能页面，直接通过JQ的方式调用，这样功能页面的代码量会少一些，所以就有了下面这个小东西，先看一下效果图：

一、控件参数介绍

1，data：为控件生成提供数据源，效果图中的标题1，标题2，标题3等导航名称就是通过该属性的NodeName获取的。

2，css：为导航树容器提供css样式，这个可以根据个人的需求进行调整，如控制导航树的距离浏览器的顶部，右侧的位置。

3，className：该参数主要用于浏览器滚动条滚动到对应内容时，导航树光标定位到对应的节点，默认的值为'.item'。

目前只有这个三个参数，大家可以在使用时根据自己的需求扩展自己想要的参数。

二、控件的调用

1，js部分

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="NavigationTree.js"></script>
<script>
        $(function () {
            //创建控件
            var tree = $('#demo').navigationTree({
                data: [
                    { ID: '1', NodeName: '标题1' },
                    { ID: '2', NodeName: '标题2' },
                    {
                        ID: '3',
                        NodeName: '标题3',
                        Children: [{ ID: '3.1', NodeName: '标题3.1' }, { ID: '3.2', NodeName: '标题3.2' }]
                    },
                    { ID: '4', NodeName: '标题4' },
                    { ID: '5', NodeName: '标题5' }
                ]
            });
        });
</script>

2，控件html部分

1 <!--控件容器开始-->
2 <div id="demo"></div>
3 <!--控件容器结束-->

怎么样，调用是不是比较简单？

三、实现难点说明

　　其实整个功能可能最难的地方就在于目录导航树如何准确显示当前用户正在浏览的区域，这个主要的是通过监听滚动条滚动的事件，然后在事件中动态的计算当前哪个元素处于浏览器可视区域的，然后取到该元素的唯一标示（ID），然后根据ID在目录导航树中找到对应的节点，计算该节点距离父元素顶部的距离，通过控制光标元素的top值，我知道，当我这句话说完的时候，你可能仍然不太明白，那么请看代码，代码有时候比别人口头解释的要直观清晰的多：

//#region滚动条事件
    var $win = $(window);
    var winHeight = $win.height();
    $win.scroll(function () {
        var winScrollTop = $win.scrollTop();
        for (var i = _allElements.length - 1; i >= 0; i--) {
            var elmObj = $(_allElements[i]);
            //!(滚动条离顶部的距离>元素在当前视图的顶部相对偏移+元素外部高度)&&!(滚动条离顶部的距离<元素在当前视图的顶部相对偏移-window对象高度/2)
            if (!(winScrollTop > elmObj.offset().top + elmObj.outerHeight()) && !(winScrollTop < elmObj.offset().top - winHeight/2)) {
                $('.arrow').css({ top: $('[data-id="' + elmObj.attr('id') + '"]').position().top + 3 });
                return false;
            }
        }
    });
    //#endregion

其中_allElements这个变量保存的就是通过className参数得到的对象数组，在scroll事件中不断的循环该数组，对比哪个元素的处于当前可视的区域内，然后拿到该元素的ID，去目录树中找到对应的节点，拿到该节点元素距离其父元素的距离，把该距离通过css给到$('.arrow')对象，该$('.arrow')对象就是右侧蓝色的光标对象，通过控制它的top值来调整它显示到对应节点的位置。

四、额外小功能

　　因为我的使用场景中需要能够标示出那个步骤已经评完了分，所以在封装这个控件的时候，额外的加了这个小功能，不过默认情况下“已完成”小图标是不会显示的，当通过以下js代码调用时，图标就会显示在对应的节点的后面：

1 //控制第二个节点显示已完成
2 tree.showOkIcon(2);

其中tree对象是创建控件后返回的对象，通过该对象的showOkIcon方法，显示小图标，参数为对应节点的ID，效果图如下：

以上就是所有的内容了，因本人第一次写博客，同时水平有限，代码实现的也可能也不够优雅、简洁。还请各位看官且看且轻拍。希望能够给您带来一丢丢的帮助。

 

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

更多阅读