在项目需求中需要实现一个滚轴联动锚点的功能
<>强效果图如下:
<强>功能代码演示如下:
& lt; template>
& lt; div类="容器"比;
& lt; div类=鞍捌鳌北?
& lt; div类="节" v=?项目、索引)列表”:关键=爸甘?在
& lt; div:在{{item.name}} & lt;/div>
& lt;/div>
& lt;/div>
& lt; div id="南京"祝辞& lt;/div>
& lt;导航比;
& lt;一个类=v代表“nav1”=?项目、索引)navList”:关键=爸甘盄click=疤?索引):类="指数==0 & # 63;“当前”:“”在{{项}}& lt;/a>
& lt;/nav>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
滚动:”,
列表:[{
名称:“第一条”,
写成backgroundcolor:“# 90 b2a3”
},{
名称:“第二条”,
写成backgroundcolor:“# A593B2”
},{
名称:“第三条”,
写成backgroundcolor:“# A7B293”
},{
名称:“第四条”,
写成backgroundcolor:“# 0 f2798”
},{
名称:“第五条”,
写成backgroundcolor:“# 0 a464d”
}]，
navList:(1、2、3、4、5)
}
},
方法:{
dataScroll:函数(){
这一点。=document.documentElement滚动。scrollTop | | document.body.scrollTop;
},
跳(指数){
让跳=document.getElementsByClassName(部分);//获取需要滚动的距离
让总=跳(指数).offsetTop;//铬
document.body。scrollTop=总;//火狐
document.documentElement。scrollTop=总;//Safari
窗口。pageYOffset=总;//$ (html、身体).animate ({//皊crollTop”:总数//},400);
},
loadSroll:函数(){
var自我=;
var美元资产净值=$ (“.nav1”);
var=document.getElementsByClassName部分(部分);
我(var=部分。长度- 1;我在=0;我(){
如果(自我。滚动祝辞=部分[我]。offsetTop - 100) {
美元navs.eq (i) .addClass(“当前”).siblings () .removeClass(“当前”)
打破;
}
}
}
},
看:{
滚动:函数(){
this.loadSroll ()
}
},
安装(){
窗口。addEventListener(“滚动”,this.dataScroll);
}
}
& lt;/script>
& lt; style>
* {
填充:0;
保证金:0;
}
.nav1 {
显示:块;
宽度:40像素;
高度:40像素;
text-align:中心;
行高:40像素;
背景:# eee;
保证金:10 px 0;
}
.current {
颜色:# fff;
背景:红色;
}
& lt;/style>
之前
以上这篇Vue监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
