html部分
<div class="container">
<ul class="nav" :class="[isSelected]">
<li><a id="navon0" href="javascript:;" @click="navClick">nav0</a> </li>
<li><a id="navon1" href="javascript:;" @click="navClick">nav1</a> </li>
<li><a id="navon2" href="javascript:;" @click="navClick">nav2</a> </li>
<li><a id="navon3" href="javascript:;" @click="navClick">nav3</a> </li>
<li><a id="navon4" href="javascript:;" @click="navClick">nav4</a> </li>
<li><a id="navon5" href="javascript:;" @click="navClick">nav5</a> </li>
<li><a id="navon6" href="javascript:;" @click="navClick">nav6</a> </li>
</ul>
<article>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</article>
</div>
javascript部分
export default {
name: 'container',
data() {
return {
isSelected: 'navon0-selected'
}
},
methods: {
// 防抖
debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function () {
// 据上一次触发时间间隔
var last = new Date() - timestamp;
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function () {
context = this;
args = arguments;
timestamp = new Date();
var callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
},
navClick(e) {
var scrollBox1 = document.querySelector('.container');
scrollBox1.scrollTo(0, [...e.target.id].pop() * 500)
this.isSelected = e.target.id + '-selected';
}
},
mounted() {
var self = this;
var liIds = [];
var doc = document;
var lis = doc.querySelectorAll('ul li');
for (var i = 0; i < lis.length; i++) {
var element = lis[i];
liIds.push(element.querySelector('a').id);
}
var $scrollBox = doc.querySelector('.container');
var scrollCallback = self.debounce(function () {
var top = $scrollBox.scrollTop; //设置变量top,表示当前滚动条到顶部的值
var tt = $scrollBox.clientHeight; //设置变量tt,表示当前滚动窗口高度的值
var num = 0;
for (var n = 0; n < 7; n++) {
//在此处通过判断滚动条到顶部的值和当前窗口高度的关系
//（当前窗口的n倍 <= top <= 当前窗口的n+1倍）来取得和导航索引值的对应关系
if (top >= n * tt && top <= (n + 1) * tt) {
num = n;
}
self.isSelected = liIds[num] + '-selected';
}
}, 100)
$scrollBox.addEventListener('scroll', scrollCallback)
}
}
为防止滚动过于频繁，造成过多不必要的计算，使用防抖函数debounce,按需也可以换成使用节流函数throttle(抽取于underscore）
//节流
throttle(func, wait, options) {
// 上下文，函数参数，函数返回值
var context, args, result;
// 延时器
var timeout = null;
// 上一次执行的func的时间点
var previous = 0;
if (!options) options = {};
// 延时执行函数
var later = function () {
// 如果及时调用被关闭，则设置previous为0
previous = options.leading === false ? 0 : new Date();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
/** 以上变量以及函数都是通过闭包的方式访问的 **/
return function () {
var now = new Date();
if (!previous && options.leading === false) previous = now;
// remaining容易理解，表示还剩多少时间可以再次执行func
var remaining = wait - (now - previous);
// 保存上下文
context = this;
// 获取函数参数
args = arguments;
// 及时模式
// remaining小于等于0是跳出wait的限制，可以执行了
// remaining大于wait的情况，只有在客户机修改了系统时间的时候才会出现
// 这两种情况都可以立刻对func做调用
if (remaining <= 0 || remaining > wait) {
// 清除定时器
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) { // 延时模式
timeout = setTimeout(later, remaining);
}
return result;
};
},
css部分
body,html{height:100%}#app,*{margin:0}.nav li a:hover,.navon0-selected #navon0,.navon1-selected #navon1,.navon2-selected #navon2,.navon3-selected #navon3,.navon4-selected #navon4,.navon5-selected #navon5,.navon6-selected #navon6{border-bottom:2px solid #0052e4}*{padding:0}li{list-style-type:none}a{text-decoration:none;outline:0}.container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;overflow:auto;width:600px;height:500px;margin:auto}.nav{position:fixed;z-index:5;display:inline-flex;flex-wrap:wrap;width:100px;height:inherit;background:#fff}.nav li{display:flex;align-items:center;justify-content:center;width:100%}.nav li a{font-size:18px;display:block;padding:10px 5px;cursor:pointer;color:#3c3c3c}#div0{background:#e6e6e6}#div1{background:#fd5331}#div2{background:#c00ab9}#div3{background:#149ce1}#div4{background:#f99831}#div5{background:#0aff3c}#div6{background:#dbe6f7}article{display:inline-block;width:80%;margin-left:100px}article>div{width:100%;height:500px}
效果图
