vue实现移动端顶吸效果

最新推荐文章于 2024-03-26 11:08:17 发布

小五呀

最新推荐文章于 2024-03-26 11:08:17 发布

阅读量386

点赞数 1

文章标签： js vue.js

本文链接：https://blog.csdn.net/weixin_42437043/article/details/104909600

版权

本文介绍了在Vue中实现移动端顶吸效果的步骤和常见问题。通过监听滚动事件，当元素滑动到屏幕顶端时，使用fixed将其固定。在实际操作中遇到了mouted内监听失效、scrollTop值为0等问题，通过调整监听方式和处理滚动事件，最终成功实现顶吸效果。需要注意内层元素高度必须大于最外层元素。

摘要由CSDN通过智能技术生成

1、顶吸：即div向上滑动到屏幕顶端时固定，下面内容继续滑动无影响
（先说下思路，对整个主题最外层的有滚动条盒子获取滚动高度scrolltop，在获取滚动元素到可是屏幕顶部的高度offsetTop，scrolltop >= offsetTop时，判断后改变样式使滚动元素利用fixed固定在顶部即可）

然后百度搜的大部分都是以下：（css样式就不写了）

mounted () {
   
  window.addEventListener('scroll', this.handleScroll)
},
method:{
   
handleScroll () {
   
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop