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 ...
随机推荐
- 玩转spring boot——国际化
前言 在项目开发中,可能遇到国际化的问题,而支持国际化却是一件很头疼的事.但spring boot给出了一个非常理想和方便的方案. 一.准备工作 pom.xml: <?xml version=& ...
- Oracle 12cR1 RAC 在VMware Workstation上安装(下)—静默安装
Oracle 12cR1 RAC 在VMware Workstation上安装(下)—静默安装 1.1 静默安装 1.1.1 静默安装grid 安装之前使用脚本进行校验,确保所有的failed选项 ...
- BZOJ 2882: 工艺 [后缀自动机+map]
Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工 ...
- Scrapy框架实战-妹子图爬虫
Scrapy这个成熟的爬虫框架,用起来之后发现并没有想象中的那么难.即便是在一些小型的项目上,用scrapy甚至比用requests.urllib.urllib2更方便,简单,效率也更高.废话不多说, ...
- 如何解决JavaScript中0.1+0.2不等于0.3
console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!= ...
- 响应式框架Bootstrap
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...
- 重写equals()和hashCode()
什么时候需要重写equals()? 只有当一个实例等于它本身的时候,equals()才会返回true值.通俗地说,此时比较的是两个引用是否指向内存中的同一个对象,也可以称做是否实例相 等.而我们在使用 ...
- linux打印彩色字
echo显示带颜色,需要使用参数-e格式如下:echo -e "\033[字背景颜色;文字颜色m字符串\033[0m"例如: echo -e "\033[41;37m T ...
- iptables snat和dnat
iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...
- JQuery坑，说说哪些大家都踩过的坑
1 乱用选择器 坑人指数:200 JQuery选择器调用代价很大,反复调用效率更低.应采用缓存对象的方法或采用链式调用的方式. //错误的写法 $("#button").click ...