锚点定位的问题

5 篇文章 0 订阅
3 篇文章 0 订阅

在开发h5页面的时候,遇到一个锚点定位的问题,需要实现的功能如下:

上面这个页面需要在手机上实现 

1)点击“简介”、“详情”、“推荐”时,页面滚动到相对应的位置

2)当手滑动屏幕,到相应位置时,头部导航相对应的tab高亮显示

首先,实现第一个功能,给每个对应的div增加相应的id="anchor_",代码如下:

以上,是实现点击导航,滚动到锚点的代码。

实现滑动屏幕到相应位置,导航高亮显示,需要借助JS的window监听事件。即在页面加载进来,mounted的时候监听:

需要在data中声明一个变量:scroll

注意:此处监听的对象一定是直接含有滚动条的元素上

在vue中需要watch这个scroll变量,根据当前滚动条的的位置来判断当前处于什么位置:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值