h5-吸顶效果的实现方法

版权声明：如要转发，请注明出处，小小喵的微博 https://blog.csdn.net/weixin_42881744/article/details/81746534

前言

我们在开发过程中，经常遇到这种需求，搜索框或者菜单，初始位置不在顶部，当我们往上滑动页面的时候，它们会固定到顶部，往下滑动，又回到初始位置。那么这个功能，如果实现呢，下面将进行详细讲解.

效果：

一、通过监听scroll事件，实现吸顶功能

这是大家经常用的一种方法
吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性
实现方法：
写入事件监听，监听滚动条。

js

mounted () {
   window.addEventListener('scroll', this.handleScroll);
},
destroyed(){
    window.removeEventListener('scroll', this.handleScroll);
},
methods: {
      handleScroll () {  
          this.$nextTick(() => {
              let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
              let offsetTop = document.querySelector('#searchBar').offsetTop;
              if (scrollTop > offsetTop) {
                  this.searchBarFixed = true;
              } else {
                  this.searchBarFixed = false;
              }
          })
      }
}

css

.isFixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
}

在对应的标签中加入修改后的样式

<div id="searchBar" :class="searchBarFixed== true?'isFixed':''">

二、页面内用了vux的scroller组件，第一种方法就失效了，那么怎么做呢

我们在开发列表页的时候，大多数需要上拉刷新和下拉刷新的操作，常用到scroller组件，但是在组件内加菜单栏，进行吸顶，就需要监听scroller组件的滚动事件了

实现思路：
scroller内的组件滑动，是不能固定到顶部的，因为在scroller内的，都属于在滑动范围中，无法脱离这个框架，这时，我们可以在scroller外面加一个同样的菜单，先隐藏，当scroller内的菜单，滑动到达顶部时，隐藏组件内菜单，展示组件外菜单，就达到吸顶的效果了。

html

 <!--菜单-->
<div class="p-tab p-tab-pa" v-show="searchBarFixed">
    <tab custom-bar-width="110px" bar-active-color="#1196b6" :animate="true">
        <tab-item v-for="(item,index) in tabList" :selected="item.channelId == channelId || tabIndex==index" active-class="p-tab-selected" @on-item-click="onItemClick" >
            <img :src="item.channelImg">{{item.channelName}}
        </tab-item>
    </tab>
</div>
<scroller lock-x scrollbar-y use-pulldown use-pullup ref="scroller" @on-scroll="onScroll" @on-pullup-loading="onScrollUp" @on-pulldown-loading="pullDown" :pulldown-config="pulldown" :pullup-config="pullup">
<!--菜单-->
        <div id="searchBar" class="p-tab" v-show="!searchBarFixed">
            <tab custom-bar-width="110px" bar-active-color="#1196b6" :animate="true">
                <tab-item v-for="(item,index) in tabList" :selected="item.channelId == channelId || tabIndex==index" active-class="p-tab-selected" @on-item-click="onItemClick" >
                    <img :src="item.channelImg">{{item.channelName}}
                </tab-item>
            </tab>
        </div>
<scroller>

js

onScroll(position){
      let scrollTop = position.top; //组件滚动时监听的top值
      this.scrollTop = scrollTop;
      var offsetTop = document.querySelector('#searchBar').offsetTop; //菜单top值
      if (scrollTop > offsetTop) { //两个值做比较
          this.searchBarFixed = true;
      } else {
          this.searchBarFixed = false;
      }
  }          

less

.p-tab-pa{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:64px;
  z-index:999;
}
.p-tab{

}