vue滑动吸顶及锚点定位的用法 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要讲解了vue滑动吸顶及锚点定位的用法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

& lt; template> 　　& lt; div类=癿ain"祝辞　　& lt; div id=& # 39;菜单# 39;比; 　　& lt; ul> 　　& lt;李v=皌abList"项目;@click=& # 39; clickTab& # 39;祝辞& lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　& lt; div id=& # 39; div1& # 39;祝辞& lt;/div> 　　& lt; div id=& # 39; div2& # 39;祝辞& lt;/div> 　　& lt; div id=& # 39; div3& # 39;祝辞& lt;/div> 　　& lt;/div> 　　& lt;/template>

(1)滑动吸顶:

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

公共用=false;
　　公共安装(){
　　这一点。menuTop=(. getelementbyid(& # 39;菜单# 39;)任何).offsetTop;
　　window.addEventListener(& # 39;滚动# 39;,this.handleScroll);
　　}
　　公共handleScroll () {
　　const scrollTop=document.documentElement。scrollTop | | document.body.scrollTop;//获取滑动距离
　　如果(scrollTop & lt;这一点。menuTop) {
　　这一点。用=false;
　　其他}{
　　这一点。用=true;//设置固定定位
　　}
　　}
　　公开销毁(){
　　window.removeEventListener(& # 39;滚动# 39;,this.handleScroll);
　　}

(2)锚点定位。点击选项卡中,设置页面滚动距离。

公共clickTab(指数:数字){
　　这一点。activeIndex=指数;
　　这一点。用=true;
　　const menuHeight=(. getelementbyid(& # 39;菜单# 39;)任何).offsetHeight;
　　const div1=(. getelementbyid (& # 39; div1& # 39;)任何).offsetTop;
　　const div2=(. getelementbyid (& # 39; div2& # 39;)任何).offsetTop;
　　const div3=(. getelementbyid (& # 39; div3& # 39;)任何).offsetTop;
　　const div4=(. getelementbyid (& # 39; div4& # 39;)任何).offsetTop;
　　开关(指数){
　　例0:document.body。scrollTop=document.documentElement。scrollTop=div1 - menuHeight;打破;
　　案例1:document.body。scrollTop=document.documentElement。scrollTop=div2 - menuHeight;打破;
　　例2:document.body。scrollTop=document.documentElement。scrollTop=div3 - menuHeight;打破;
　　案例3:document.body。scrollTop=document.documentElement。scrollTop=div4 - menuHeight;打破;
　　默认值:document.body。scrollTop=document.documentElement。scrollTop=div1 - menuHeight;
　　}
　　}

看完上述内容,是不是对vue滑动吸顶及锚点定位的用法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。