写商城项目的时候引用better-scroll的时候遇到的position:fixed样式不生效的问题

在商城项目中遇到使用better-scroll时position:fixed样式失效的挑战,为实现导航栏固定在顶部的效果,采取了复制导航栏组件的方法。通过动态显示和隐藏顶部导航栏,保持其与原导航栏点击位置同步,从而在滚动过程中实现所需功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写商城项目的时候引用better-scroll的时候遇到的position:fixed样式不生效的问题

中间的导航栏原本是用的position:fixed,用户一直滑动到某个位置,导航栏就会停留在顶部的效果,但是一旦引用了better-scroll滚动条,我的CSS样式就不生效了,于是我在首页这个组件最上面, 多复制了一份导航栏组件, 利用它来实现停留效果.

  • 当用户滚动到一定位置时, 上面的导航栏显示出来.
  • 当用户滚动没有达到一定位置时, 导航栏隐藏起来.
    在这里插入图片描述
    让上面的导航栏和下面的导航栏点击后的位置一致
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值