html不随页面滚动的导航栏怎么设置的,网站大全页面滚动导航菜单跟随切换_百科目录导航树小插...

青岛门户网站：青岛政务网、人力资源和社会保障局、青岛新闻网、半岛网、青岛之窗

青岛娱乐网站：半岛娱乐频道、新闻网娱乐频道、华夏娱乐

青岛体育网站：青岛体育信息网、青岛大学体育学院、体育局、青岛网络广播电台体育频道

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

一、控件参数介绍

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

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

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

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

二、控件的调用

1，js部分

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'}

]

});

});

2，控件html部分

1

2