vue移动端项目实现顶部悬停（顶部吸附）效果

程序员文章站 2022-07-02 18:54:24

...

项目是最近一个移动端的vue项目，需要实现一个滑动超过导航栏实现顶部悬停效果，方法比较麻烦

思路是监听外层盒子滑动高度，达到一定高度改变需要悬停盒子的定位，再滑回去是重新重置定位

需要注意的是移动端盒子高度的适配问题

代码如下：

外层盒子监听方法绑定

<div class="shopBaby" ref="shopBaby" @scroll="getScroll">
<!--    顶部-->
....
</div>

悬停盒子

<div class="search-wrap" v-if='!$route.query.storeId' :style="{background:isFixed?'#fff':'',position:isFixed?'fixed':'absolute'}">
.....
</div>

监听逻辑代码

getScroll(event) {
  let imgCWidth = window.screen.width    //屏幕宽度0
  let topHeight = (imgCWidth/15)*9.54-10  //适配屏幕大小
  let scrollBottom = event.target.scrollTop  //滑动高度
  // console.log(scrollBottom)
  if(topHeight<=scrollBottom){
    this.isFixed = true
  }
  if(topHeight>scrollBottom){
    this.isFixed = false
  }
}

实现效果如下图

vue移动端项目实现顶部悬停（顶部吸附）效果

感谢阅读！第一次处理这种需求。欢迎大神分享好的处理办法。