html部分
<ul class="slider-menu-content" style="height: 492px" @click="selectMenu" id="sliderMenuContent">
<li id="canCtrl">a<span></span></li>
<li id="linCtrl">b<span></span></li>
<li id="diCtrl">c<span></span></li>
<li id="doCtrl">d<span></span></li>
<li id="recCtrl">e<span></span></li>
<li id="trgCtrl">f<span></span></li>
<li id="quotaCtrl">g<span></span></li>
<li id="gpsCtrl">h<span></span></li>
<li id="smsCtrl">i<span></span></li>
<li id="netCtrl">j<span></span></li>
<li id="netFltCtrl">k<span></span></li>
<li id="iotEnCtrl">l<span></span></li>
</ul>
// 右侧内容部分
<ul class="slider-menu-content" style="height: 492px" id="bodyContent">
<li id="can">内容a<span></span></li>
<li id="lin">内容b<span></span></li>
<li id="di">内容c<span></span></li>
<li id="do">内容d<span></span></li>
<li id="rec">内容e<span></span></li>
<li id="trg">内容f<span></span></li>
<li id="quota">内容g<span></span></li>
<li id="gps">内容h<span></span></li>
<li id="sms">内容i<span></span></li>
<li id="net">内容j<span></span></li>
<li id="netFlt">内容k<span></span></li>
<li id="iotEn">内容l<span></span></li>
</ul>
js部分
事件代理机制
document.getElementById("bodyContent").onclick = selectMenu(e)
// 构成缓慢滑动的效果
function scroll (currentY, targetY) {
let differenceTop = targetY - currentY
let _currentY = currentY
setTimeout(function () {
const dist = Math.ceil(differenceTop / 6)
_currentY += dist
window.scrollTo(_currentY, currentY)
if (differenceTop > 6 || differenceTop < -6) {
scroll(_currentY, targetY)
} else {
window.scrollTo(_currentY, targetY)
}
}, 1)
}
// 元素选中样式去重
function removeDuplicate (ele, classname) {
if (ele.className.indexOf(classname) === -1) {
ele.className = ele.className + ' ' + classname
}
let siblings = ele.parentNode.children
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] !== ele) {
siblings[i].classList.remove(classname)
}
}
}
// 侧边栏菜单点击选中效果
function selectMenu (e) {
const target = e.target
if (target && target.nodeName === 'LI') {
this.removeDuplicate(target, 'slider-menu-item-active')
// 获取点击项对应配置项的id
const menuId = target.id
let configId = ''
for (let i = 0; i < menuId.length - 4; i++) {
configId += menuId[i]
}
// 移动效果
let scrollHeight = document.getElementById(configId).offsetTop - 10
let currentY = document.documentElement.scrollTop || document.body.scrollTop
scroll(currentY, scrollHeight)
}
}
// 随着页面滚动，让侧边栏的选中样式发生改变
function changeScrolltop (scrollTop) {
let childrens = null
if (document.getElementById('sliderMenuContent')) {
childrens = document.getElementById('sliderMenuContent').childNodes // sliderMenuContent 为侧边栏的父节点的id
} else {
return false
}
if (scrollTop === 0) {
this.removeDuplicate(document.getElementById(childrens[0].id), 'slider-menu-item-active')
return false
}
childrens.forEach((element, v) => {
if (element.id) {
let configId = ''
for (let i = 0; i < element.id.length - 4; i++) {
configId += element.id[i]
}
if (scrollTop >= (document.getElementById(configId).offsetTop - 75)) {
this.removeDuplicate(document.getElementById(element.id), 'slider-menu-item-active')
}
}
})
}
// 给页面添加监听滚动事件
window.addEventListener('scroll', (e) => {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
changeScrolltop(scrollTop)
})