首页 > 代码库 > 页面中的导航监测
页面中的导航监测
我在格斗人网 (www.helpqy.com) 中使用了下面的导航监测技术。
大家在京东或者其它一些网站上可以看到，随着页面的滚动，右侧的导航条的焦点也不断变化，使焦点所指示的导航项与页面内容相对应，这采用了导航监测技术。
格斗人网的整个CSS基于Bootstrap.css，Bootstrap.css有现成的导航监测解决方案，但需要做如下工作：
1. 需要在页面中引入最新版的jquery.js，bootstrap.css和bootstrap.js三个文件。其中bootstrap.css和bootstrap.js可以在www.bootcss.com中下载。
2. 在整个导航监测的使用中，有3类角色：导航条，被导航内容和滚动主对象。下面分别介绍
(1) 导航条。在class为nav的导航条的外面封一个父元素，并将其命名，比如叫：navbar-example。在每一个导航条目中，都必须采用<a href="http://www.mamicode.com/#XXX">来指明超级链接的位置，即指向某一锚点。
1 <div id="navbar-example" class="navbar">2 <ul class="nav" role="tablist">3 <li><a href="#AAA)">ABC</a></li>4 <li><a href="#BBB)">ABC</a></li>5 <li><a href="#CCC)">ABC</a></li>6 </ul>7 </div>
(2) 被导航内容。 被导航内容的格式自由度比较大，但是要在需要导航的地方安放锚点，类似于如下格式：
<div id="ExampleContent"> <h2 id="AAA">AAA</h2> <p> XXXXXXXXXXXXXX</p> <h2 id="BBB">BBB</h2> <p> XXXXXXXXXXXXXX</p> <h2 id="CCC">CCC</h2> <p> XXXXXXXXXXXXXX</p></div>
(3) 滚动主对象。这里容易出错，如果被导航内容放置在一个具有框属性overflow=scroll的容器中，比如上述代码中id为“ExampleContent”的overflow=scroll，则滚动主对象就是这个被导航内容，需要将上述代码最外层的div变为如下所示。这里data-offset为偏移属性，需要根据实际情况调整，“#navbar-exampe”指向的是导航条。
<div id="ExampleContent" data-spy="scroll" data-target="#navbar-example" data-offset="0" class="xxx">
如果被导航内容没有放置在一个具有框属性overflow=scroll的容器中，比如上述代码中id为“ExampleContent”的div没有设置overflow=scroll，则实际的滚动是整个页面在滚动，则需要将整个页面最外面的body改为如下所示：
<body data-spy="scroll" data-target="#navbar-example" data-offset="0">
大功告成！