JS原生代码实现导航高亮
一 实现原理
根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联，并对相应的导航设置高亮样式。
二 代码解析
先简单写一个页面顶端的导航栏：
<nav>
<ul>
<li><a class="nav active" href="#nav1">导航1</a></li>
<li><a class="nav" href="#nav2">导航2</a></li>
<li><a class="nav" href="#nav3">导航3</a></li>
<li><a class="nav" href="#nav4">导航4</a></li>
</ul>
</nav>
注意这里第一个导航初始添加一个active类，表示首页默认对应导航1。
为每个导航写一个对应的正文页面：
<div id="nav1" class="section">这是页面1</div>
<div id="nav2" class="section">这是页面2</div>
<div id="nav3" class="section">这是页面3</div>
<div id="nav4" class="section">这是页面4</div>
然后添加导航的CSS：
*{margin:0px;} /*先清除浏览器默认外边距*/
nav{
position:fixed;
width:100%;
z-index:999;
margin-top:0px
} /*fixed固定导航，并设置为最高层，防止被后面的元素遮盖。*/
nav ul{
text-align:center;
height:45px;
line-height:45px;
background:#0B0B0B;
}
nav li,nav li a{
display:inline-block;
height:100%;
text-decoration:none;
color:#fff;
}
nav li a{padding:0 10px;}
nav li{margin:0 10px;}
a:hover, .active{color:#B6B6B6;} /*为鼠标悬浮的状态以及当前页面对应的导航设置不同的颜色*/
添加正文的CSS：
.section{height:660px;
width:100%;
margin:10px auto;
background:#F5F5F5;
padding-top:60px;
box-sizing:border-box;
border:1px solid red;
text-align:center;
} /*注意将box-sizing设为border-box，每个页面的整体高度即为原来设定的高度，后面用JS计算页面高度时免去计算content、padding、margin的麻烦*/
此时样式如图所示：
下一步通过JS实现导航状态的切换：
首先获取所有的导航：
var navs=document.getElementByClassName('nav');
定义导航的切换方法，即每次通过增加一个类名active来为其应用已经设定好的样式，这里有4个导航，所以需要给4个元素添加类名。
function reset(index){
for(var i=0;i<4;i++){
navs[i].className="nav"; //注意每次添加类名之前先清空之前设置的active，否则只要经过的页面，对应的导航都是高亮状态
}
navs[index].className += " active";
}
由于是根据当前页面和滚动条的高度关联，从而利用滚动条的当前高度来判断应该切换哪个导航，因此要获取两个值：当前页面距离文档顶部的高度，以及当前滚动条的高度。
写一个函数来根据id获取单个页面整体的高度height
function getHeight(id){
var elem=document.getElementById(id);
var height=parseInt(window.getComputedStyle(elem,null)['height']);
return height;
}
调用这个函数并累加得出每个页面距离文档顶部的距离（不是窗口）。由于总共4个导航对应4个页面，所以只需判断3个页面即可。
var t1=getHeight("nav1");
var t2=t1+getHeight("nav2");
var t3=t2+getHeight("nav3");
再写一个函数通过将当前滚轮高度和当前页面距离文档顶部的高度来作比较，判断应当切换到哪个导航。将页面的滚动事件绑定到这个函数，实时获取滚轮高度的值，实现导航样式的实时切换：
window.onscroll=function changeCss(){
var t=document.documentElement.scrollTop || document.body.scrollTop; //获取当前页面滚动条的高度
if (t<t1){
reset(0); //当页面还处于第一页时，第一个导航亮起
} else if (t<t2){
reset(1); //当页面滚动到第二页时，第一个导航熄灭，第二个导航亮起
} else if (t<t3){
reset(2);
} else{
reset(3);
}
}
三 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>别踩白块</title>
<style>
*{margin:0px;}
nav{position:fixed;width:100%;z-index:999;} /*fixed固定导航，并设置为最高层，防止被后面的元素遮盖。*/
nav ul{margin-top:0px;text-align:center;height:45px;line-height:45px;background:#0B0B0B;}
nav li,nav li a{display:inline-block;height:100%; text-decoration:none;color:#fff;}
nav li a{padding:0 10px;}
nav li{margin:0 10px;}
a:hover, .active{color:#B6B6B6;} /*为鼠标悬浮的状态以及当前页面对应的导航设置不同的颜色*/
.section{height:660px;width:100%;margin:0px auto;background:#F5F5F5;padding-top:60px;box-sizing:border-box;border:1px solid red;text-align:center;}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav active" href="#nav1">导航1</a></li>
<li><a class="nav" href="#nav2">导航2</a></li>
<li><a class="nav" href="#nav3">导航3</a></li>
<li><a class="nav" href="#nav4">导航4</a></li>
</ul>
</nav>
<div id="nav1" class="section">这是页面1</div>
<div id="nav2" class="section">这是页面2</div>
<div id="nav3" class="section">这是页面3</div>
<div id="nav4" class="section">这是页面4</div>
<script>
var navs=document.getElementsByClassName('nav');
function reset(index){
for(var i=0;i<4;i++){
navs[i].className="nav"; //注意每次添加类名之前先清空之前设置的active，否则只要经过的页面，对应的导航都是高亮状态
}
navs[index].className += " active";
}
function getHeight(id){
var elem=document.getElementById(id);
var height=parseInt(window.getComputedStyle(elem,null)['height']); //计算渲染后的style值
return height;
}
var t1=getHeight("nav1");
var t2=t1+getHeight("nav2");
var t3=t2+getHeight("nav3");
window.onscroll=function changeCss(){
var t=document.documentElement.scrollTop || document.body.scrollTop; //获取当前页面滚动条的高度
if (t<t1){
reset(0); //当页面还处于第一页时，第一个导航亮起
} else if (t<t2){
reset(1); //当页面滚动到第二页时，第一个导航熄灭，第二个导航亮起
} else if (t<t3){
reset(2);
} else{
reset(3);
}
}
</script>
</body>
</html>
这一次是自己设计自己写的，所以没有视频资源。实际上用JQuery实现起来会更方便，但是用原生代码能够了解底层原理，加深理解。导航高亮的实现方式还有别的方法，例如利用URL与页面的对应关系，根据URL的变化判断当前页面应该对应的导航栏，但是这种方法也有一定的局限性，并不能适用于所有场景。
JS原生代码实现导航高亮的更多相关文章
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- 用Node.js原生代码实现静态服务器
---恢复内容开始--- 后端中服务器类型有两种 1. web服务器[ 静态服务器 ] - 举例: wamp里面www目录 - 目的是为了展示页面内容 - 前端: nginx 2. 应用级服务器[ a ...
- 基于面向对象的图片轮播（js原生代码）
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- JS原生代码之倒计时抢购
学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击.代码为:document.getElementById("buy").disa ...
- day28(ajax之js原生代码实现)
ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML ...
- js原生代码实现鼠标拖拽(超简单)
首先先来看这一张图 在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示 这些样式都不是重要的,这里加个marg ...
- js原生代码编写一个鼠标在页面移动坐标的检测功能，兼容各大浏览器
function mousePosition(e) { //IE9以上的浏览器获取 if (e.pageX || e.pageY) { return { ...
- 高效的js原生代码
1.遍历元素 //不推荐 var element = document.getElementsByTagName('div'); for(var i=0; i<element.length; i ...
随机推荐
- Oracle 修改表操作
如题: --增加列操作: alert table 表名 add 列名 列的类型 eg:alter table EMP1 add pwd varchar2(10); --删除列操作: alert ...
- 【OCR技术系列之四】基于深度学习的文字识别（3755个汉字）
上一篇提到文字数据集的合成,现在我们手头上已经得到了3755个汉字(一级字库)的印刷体图像数据集,我们可以利用它们进行接下来的3755个汉字的识别系统的搭建.用深度学习做文字识别,用的网络当然是CNN ...
- bzoj 4546: codechef XRQRS [可持久化Trie]
4546: codechef XRQRS 可持久化Trie codechef上过了,bzoj上蜜汁re,看别人说要开5.2e5才行. #include <iostream> #includ ...
- 洛谷 P3672 小清新签到题 [DP 排列]
传送门 题意:给定自然数n.k.x,你要求出第k小的长度为n的逆序对对数为x的1~n的排列 $n \le 300, k \le 10^13$ 一下子想到hzc讲过的DP 从小到大插入,后插入不会对前插 ...
- Java随感
创新项目要用java,而我只大概会C++,只能靠自学咯~~~随时将一些重要的概念做笔记在这里吧>_< 1.一个源文件中只能有一个public类,一个源文件可以有多个非public类 2.所 ...
- 共享数据的包含const
1.常引用:被引用的对象不能被更新 使用:const 类型名 &引用对象 如const int &a; 2.常对象:必须进行初始化,并且对象不能改变 使用:类名 const ...
- LeetCode - 661. Image Smoother
Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...
- php 生成缩略图
$src = '4.jpg'; list($width,$height) = getimagesize($src); $im = imagecreatefromjpeg($src); $panl = ...
- TKCPP
volume one: http://book.huihoo.com/thinking-in-cpp-2nd-ed-vol-one/ volume2 : http://book.huihoo.com/ ...
- intellij idea maven 工程生成可执行的jar
新建maven 工程 写hello world 修改pom.xml 文件 <build> <pluginManagement> <plugins> <plug ...