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 12cR1 RAC 在VMware Workstation上安装(下)—静默安装
Oracle 12cR1 RAC 在VMware Workstation上安装(下)—静默安装 1.1 静默安装 1.1.1 静默安装grid 安装之前使用脚本进行校验,确保所有的failed选项 ...
- NIO基础篇(一)
1.NIO与传统IO的比较 Java的NIO(New IO)是不同于旧IO的,旧的IO是基于字节流和字符流的,是阻塞的IO.NIO是基于通道(Channel)和缓冲区(Buffer)的,是非阻塞的IO ...
- 洛谷 [P3384] 树链剖分 模版
支持各种数据结构上树,注意取膜. #include <iostream> #include <cstring> #include <algorithm> #incl ...
- BZOJ 4176: Lucas的数论 [杜教筛]
4176: Lucas的数论 题意:求\(\sum_{i=1}^n \sum_{j=1}^n \sigma_0(ij)\) \(n \le 10^9\) 代入\(\sigma_0(nm)=\sum_{ ...
- 使用angular/react/vue实现相同的面试题组件
面试题要求如下所示 1.angular: <!DOCTYPE html><html lang="en"><head> <meta char ...
- char数组中除去某个元素
/* 本程序说明: char数组中除去某个元素(其实就是strcpy源码的变形) */ #include <iostream> #include <cassert> #incl ...
- 大型互联网公司Java开发岗位面试题归类！
一.Java基础 1. String类为什么是final的. 2. HashMap的源码,实现原理,底层结构. 3. 说说你知道的几个Java集合类:list.set.queue.map实现类咯.. ...
- elasticsearch2.3.3安装
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 作者原来搭建的环境是0.95版本 现在升级到2.3.3版本, ...
- jQuery学习心得一
1.闭包 每次看到jQuery的时候,首先想到的就是闭包.这是个老生常谈的问题了.今天重新回忆了一下闭包. 什么是闭包? 当有一个函数想要访问另一个函数内部的变量,这个是访问不了的.所有我们要用闭包来 ...
- ios音乐播放器demo
闲暇时间,写了一个音乐播放器. 个人认为,基于Demo 的学习是最有效果的. 想学习的同学,欢迎下载.知识,只有在传播的时候才有价值. 不懂之处,欢迎留言询问,将热情解答. 运行图 项目结构图 Git ...