最近给营销市场部做了个H5页面，页面大概要求就是一个单独的H5页面，顶部导航栏固定含有三个导航按钮必须和正文对应内容联动。
首先想到需要用到锚点，但是单纯的锚点功能会显得滚动条很突兀一下子就跳到内容区了，效果很不理想，然后单纯的一个H5页面去引进jQuery库肯定也是不合理的，所以必须自己去监听滚动条实现功能。
导航栏
<div class="header-main" :style="getColor()">
<div class="h5-header">
<div class="header-left"><i class="okicon icon-0121"></i></div>
<div class="header-right">
<span :class="{active: active == 0}">OKKONG OS</span>
<span :class="{active: active == 1}">系统亮点</span>
<span :class="{active: active == 2}">联系客服</span>
</div>
</div>
</div>
固定导航栏css
其中有个小细节就是因为大div里设置了背景图，导航栏的背景色要求是设置成0.15，这个时候我们背景色应该使用rgba，第四个参数写上透明度0.15（小本本记好），这个就可以解决以后背景图和背景色需要同时存在的情况了
.header-main{
min-width: 1200px;
background:rgba(255, 255, 255, 0.15);
position: fixed;
top:0;
left: 0;
right: 0;
}
设置选中导航按钮的样式
.active{
color: #FFA624;
border-bottom: 4px solid #FFA624;
font-weight: 800;
}
初始data里active值为0，默认选中第一个导航按钮
data(){
return {
active: 0, // 当前激活的导航索引
scrollTop:'',//滚动距离
}
}
接下来我们就需要监听滚动事件handleScroll()
handleScroll () {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop//获取滚动距离
this.scrollTop = scrollTop//data里return了一个全局的scrollTop
console.log(scrollTop)
//这边距离我是通过打印scrollTop大致自己粗略的计算了下，用来判断滚轮滚动相应的距离改变导航栏对应菜单样式
if (scrollTop > 1115) {
this.active = 1
}
if(scrollTop > 1850){
this.active = 2
}
if(scrollTop < 1000){
this.active = 0
}
}
顶部导航栏还有个样式就是需要滚动下去时改变导航栏背景色，这个时候我们就需要给导航栏添加动态的style样式
<div class="header-main" :style="getColor()">
样式方法
getColor(){
//当滚动距离超过导航栏高度时改变背景色
if(this.scrollTop > 45){
return {
background:"#487DFE"
}
}else{
return false
}
}
最重要的一个环节就是给导航菜单栏添加点击滚动事件scrollTo()
给三个导航按钮增加点击事件
<div class="header-right">
<span :class="{active: active == 0}" @click="scrollTo(1)">OKKONG OS</span>
<span :class="{active: active == 1}" @click="scrollTo(2)">系统亮点</span>
<span :class="{active: active == 2}" @click="scrollTo(3)">联系客服</span>
</div>
定义scrollTo()方法
具体需要注意的地方和相应的解释在代码中已经给出
//跳转到指定元素
scrollTo(val){
// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉
const STEP = 50
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop//获取滚动距离
var targetOffsetTop = ''
if(val == 1){
targetOffsetTop = document.querySelector('.h5-os').offsetTop - 60//获取指定元素视口距离
}
if(val == 2){
targetOffsetTop = document.querySelector('.h5-oslight').offsetTop - 60//获取指定元素视口距离
}
if(val == 3){
targetOffsetTop = document.querySelector('.contactService').offsetTop - 60//获取指定元素视口距离
}
if (scrollTop < targetOffsetTop) {
// 往下滑
smoothDown()
console.log(targetOffsetTop,'视口距离')
}else{
console.log(targetOffsetTop,'targetOffsetTop')
smoothUp()
}
// 定义下滑函数
function smoothDown() {
console.log(scrollTop,'scrollTop')
// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
if (scrollTop < targetOffsetTop) {
// 如果和目标相差距离大于等于 STEP 就跳加上 STEP
// 否则直接跳到目标点，目标是为了防止跳过了。
if (targetOffsetTop - scrollTop >= STEP) {
scrollTop += STEP
} else {
scrollTop = targetOffsetTop
}
document.body.scrollTop = scrollTop
document.documentElement.scrollTop = scrollTop
// 屏幕在绘制下一帧时会回调传给 requestAnimationFrame 的函数
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
requestAnimationFrame(smoothDown)
}
}
// 定义上滑函数
function smoothUp() {
// 如果当前 scrollTop 大于 targetOffsetTop 说明视口已经滑过指定位置需要上滑
if (scrollTop > targetOffsetTop) {
// 如果和目标相差距离大于等于 STEP 就跳减去 STEP
// 否则直接跳到目标点，目标是为了防止跳过了。
if (scrollTop - targetOffsetTop >= STEP) {
scrollTop -= STEP
} else {
scrollTop = targetOffsetTop
}
document.body.scrollTop = scrollTop
document.documentElement.scrollTop = scrollTop
// 屏幕在绘制下一帧时会回调传给 requestAnimationFrame 的函数
// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
requestAnimationFrame(smoothUp)
}
}
},
最后在mounted()中监听滚动事件，代码如下
mounted() {
// 监听滚动事件
// document.getElementById("blockmain").addEventListener("scroll", this.handleScroll)
// window.addEventListener('scroll', this.handleScroll)
this.$nextTick(function () {
window.addEventListener('scroll', this.handleScroll)
})
},
需要注意的是在组件销毁时我们需要移除滚动监听器，不然监听器会报错
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
window.removeEventListener('scroll', this.handleScroll)
}
以上便是此次滚动事件平滑滚动和锚点双向功能的实现逻辑
网友评论