示例：使用JS原生代码实现导航栏高亮效果
```javascript // HTML结构
- Section 1
- <nav><ul><li><aclass="navactive"href="#nav1">导航1</a></li><li><aclass="nav"href="#nav2">导航2</a></li><li><aclass="nav"href="#nav3">导航3</a></li><li><aclass="nav"href="#nav4">导航4</a></li></ul></nav>
为每个导航写一个对应的正文页面：
<divid="nav1"class="section">这是页面1</div><divid="nav2"class="section">这是页面2</div><divid="nav3"class="section">这是页面3</div><divid="nav4"class="section">这是页面4</div>
CSS代码
*{margin:0px;}/*先清除浏览器默认外边距*/nav{position:fixed;width:100%;z-index:999;margin-top:0px}/*fixed固定导航，并设置为最高层，防止被后面的元素遮盖。*/navul{text-align:center;height:45px;line-height:45px;background:#0B0B0B;}navli,navlia{display:inline-block;height:100%;text-decoration:none;color:#fff;}navlia{padding:010px;}navli{margin:010px;}a:hover,.active{color:#B6B6B6;}/*为鼠标悬浮的状态以及当前页面对应的导航设置不同的颜色*/添加正文的CSS：
.section{height:660px;width:100%;margin:10pxauto;background:#F5F5F5;padding-top:60px;box-sizing:border-box;border:1pxsolidred;text-align:center;}将box-sizing设为border-box，每个页面的整体高度即为原来设定的高度，后面用js计算页面高度时免去计算content、padding、margin的麻烦
js代码
首先获取所有的导航：
varnavs=document.getElementByClassName('nav');定义导航的切换方法，即每次通过增加一个类名active来为其应用已经设定好的样式，这里有4个导航，所以需要给4个元素添加类名。
functionreset(index){for(vari=0;i<4;i++){navs[i].className="nav";//注意每次添加类名之前先清空之前设置的active，否则只要经过的页面，对应的导航都是高亮状态}navs[index].className+="active";}由于是根据当前页面和滚动条的高度关联，从而利用滚动条的当前高度来判断应该切换哪个导航，因此要获取两个值：当前页面距离文档顶部的高度，以及当前滚动条的高度。
写一个函数来根据id获取单个页面整体的高度height
functiongetHeight(id){varelem=document.getElementById(id);varheight=parseInt(window.getComputedStyle(elem,null)['height']);returnheight;}调用这个函数并累加得出每个页面距离文档顶部的距离（不是窗口）。由于总共4个导航对应4个页面，所以只需判断3个页面即可。
vart1=getHeight("nav1");vart2=t1+getHeight("nav2");vart3=t2+getHeight("nav3");再写一个函数通过将当前滚轮高度和当前页面距离文档顶部的高度来作比较，判断应当切换到哪个导航。将页面的滚动事件绑定到这个函数，实时获取滚轮高度的值，实现导航样式的实时切换：
window.onscroll=functionchangeCss(){vart=document.documentElement.scrollTop||document.body.scrollTop;//获取当前页面滚动条的高度if(t<t1){reset(0);//当页面还处于第一页时，第一个导航亮起}elseif(t<t2){reset(1);//当页面滚动到第二页时，第一个导航熄灭，第二个导航亮起}elseif(t<t3){reset(2);}else{reset(3);}}完整示例代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>别踩白块</title><style>*{margin:0px;}nav{position:fixed;width:100%;z-index:999;}/*fixed固定导航，并设置为最高层，防止被后面的元素遮盖。*/navul{margin-top:0px;text-align:center;height:45px;line-height:45px;background:#0B0B0B;}navli,navlia{display:inline-block;height:100%;text-decoration:none;color:#fff;}navlia{padding:010px;}navli{margin:010px;}a:hover,.active{color:#B6B6B6;}/*为鼠标悬浮的状态以及当前页面对应的导航设置不同的颜色*/.section{height:660px;width:100%;margin:0pxauto;background:#F5F5F5;padding-top:60px;box-sizing:border-box;border:1pxsolidred;text-align:center;}</style></head><body><nav><ul><li><aclass="navactive"href="#nav1">导航1</a></li><li><aclass="nav"href="#nav2">导航2</a></li><li><aclass="nav"href="#nav3">导航3</a></li><li><aclass="nav"href="#nav4">导航4</a></li></ul></nav><divid="nav1"class="section">这是页面1</div><divid="nav2"class="section">这是页面2</div><divid="nav3"class="section">这是页面3</div><divid="nav4"class="section">这是页面4</div><script>varnavs=document.getElementsByClassName('nav');functionreset(index){for(vari=0;i<4;i++){navs[i].className="nav";//注意每次添加类名之前先清空之前设置的active，否则只要经过的页面，对应的导航都是高亮状态}navs[index].className+="active";}functiongetHeight(id){varelem=document.getElementById(id);varheight=parseInt(window.getComputedStyle(elem,null)['height']);//计算渲染后的style值returnheight;}vart1=getHeight("nav1");vart2=t1+getHeight("nav2");vart3=t2+getHeight("nav3");window.onscroll=functionchangeCss(){vart=document.documentElement.scrollTop||document.body.scrollTop;//获取当前页面滚动条的高度if(t<t1){reset(0);//当页面还处于第一页时，第一个导航亮起}elseif(t<t2){reset(1);//当页面滚动到第二页时，第一个导航熄灭，第二个导航亮起}elseif(t<t3){reset(2);}else{reset(3);}}</script></body></html>
