实现导航栏 跟随滚动， 点击导航 页面滚动到相应指定位置？
第一次写博客，还望指正不足：wo..菜鸟+1
简单的思路是：
导航菜单里， 通过给元素指定 data-socrll-id 属性， 来影射 内容区里对应的 元素。
如 data-socrll-id=”page-a” 对应内容区的 元素 <div id=”page-a”></idv>。
然后根据 筛查 所有 data-sorcll-id 的的元素， 然后根据 这些元素 找到 对应的内容区。
通过监听 window的滚动事件，通过滚动高度来判断那个内容区在当前视口， 从而操作对应的 导航菜单里的状态的转换。 点击导航菜单 触发滚动， 与此相对应。
简单的代码思路实现：
不知道是不是算自己的一个jquey 插件（jq菜鸟）
优化性能：
- 增加节流函数
- 缓存 $()元素对象
- 未完成 可以直接把内容元素信息筛选一遍 放到数组里， 减少 对dom对象的访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.container div {
height: 1000px;
background: red;
border-bottom: 1px solid #fff;
font-size: 64px;
line-height: 1000px;
text-align: center;
}
.nav-list {
position: fixed;
width: 100%;
left: 0;
top: 80px;
background: black;
z-index: 999;
}
.nav-list a {
float: left;
width: 100px;
padding: 20px 0;
line-height: 1;
text-align: center;
color: white;
text-decoration: none;
}
.nav-list a.active {
color: red;
}
</style>
</head>
<body>
<div class="special-box-con">
<div class="nav-list">
<a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-a">a</a>
<a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-b">b</a>
<a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-c">c</a>
<a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-d">d</a>
</div>
<div class="container">
<div id="page-a">
a
</div>
<div id="page-b">
b
</div>
<div id="page-c">
c
</div>
<div id="page-d">
d
</div>
</div>
</div>
<script src="./js/jquery-2.0.0.min.js"></script>
<script class="special-plugins">
$.fn.extend({
navMapScroll (active, dataArt) {
// 缓存jquey 查询的元素， 或类名
var pageEqClass = {}
var navEqClass = {}
var pageList = []
var navElems = $(this).find('['+dataArt+']')
//节流函数
var thrFn = function (fn, time, maxLog) {
var timeK = null
var oTime = new Date().getTime()
var execFn = function () {
fn()
oTime = new Date().getTime()
}
return function () {
var nTime = new Date().getTime()
clearTimeout(timeK)
if (nTime - oTime > maxLog) {
execFn()
} else {
timeK = setTimeout(execFn, time)
}
}
}
var fn = thrFn(function () {
// 判断哪里内容区，在当前视口。对相应的导航进行相应的操作。
let scrollTop = window.pageYOffset || window.document.documentElement.scrollTop
for (var k in pageEqClass) {
var elem = pageEqClass[k]
var offsetTop = elem.offset().top
var elemH = elem.outerHeight()
if (offsetTop - scrollTop <= 0 && offsetTop + elemH - scrollTop > 0) {
navEqClass[k].addClass(active)
} else {
navEqClass[k].removeClass(active)
}
}
}, 50, 200)
// 筛查元素
navElems.each(function () {
const $elem = $(this)
const className = $elem.attr(dataArt)
const elem = $('#' + className)
pageList.push(elem)
pageEqClass[className] = elem
navEqClass[className] = $elem
})
$(window).on('scroll', fn)
navElems.on('click', function () {
// 点击菜单 滚动到对应的内容区。
var className = $(this).attr(dataArt)
$(window).scrollTop(pageEqClass[className].offset().top)
})
fn()
return this
}
})
</script>
<script>
$('.nav-list').navMapScroll('active', 'data-socrll-id')
</script>
</body>
</html