微客导航 » 文章资讯 » vue滑动吸顶及锚点定位的示例代码

vue滑动吸顶及锚点定位的示例代码

2023-07-25 15:19:13 521

在上篇文章给大家介绍了vue实现吸顶、锚点和滚动高亮按钮效果感兴趣的朋友可以点击查看https://www.nhooo.com/article/172365.htm

今天给大家继续分享vue滑动吸顶及锚点定位的代码，具体内容如下所示：

Vue项目中需要实现滑动吸顶以及锚点定位功能。template代码如下:

(1)滑动吸顶:

监听scroll事件，获取页面的滚动距离，一旦滚动距离大于目标值，实现滑动吸顶功能。

publicisFixed=false;
publicmounted(){
this.menuTop=(document.getElementById('menu')asany).offsetTop;
window.addEventListener('scroll',this.handleScroll);
}
publichandleScroll(){
constscrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获取滑动距离
if(scrollTop
（2）锚点定位。点击tab，设置页面滚动距离。
publicclickTab(index:number){
this.activeIndex=index;
this.isFixed=true;
constmenuHeight=(document.getElementById('menu')asany).offsetHeight;
constdiv1=(document.getElementById('div1')asany).offsetTop;
constdiv2=(document.getElementById('div2')asany).offsetTop;
constdiv3=(document.getElementById('div3')asany).offsetTop;
constdiv4=(document.getElementById('div4')asany).offsetTop;
switch(index){
case0:document.body.scrollTop=document.documentElement.scrollTop=div1-menuHeight;break;
case1:document.body.scrollTop=document.documentElement.scrollTop=div2-menuHeight;break;
case2:document.body.scrollTop=document.documentElement.scrollTop=div3-menuHeight;break;
case3:document.body.scrollTop=document.documentElement.scrollTop=div4-menuHeight;break;
default:document.body.scrollTop=document.documentElement.scrollTop=div1-menuHeight;
}
}
总结
到此这篇关于vue滑动吸顶及锚点定位的示例代码的文章就介绍到这了,更多相关vue滑动吸顶锚点定位内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vue滑动吸顶及锚点定位的示例代码

热门推荐

随机推荐