vue js手机端滑到某一个位置时固定位置显示

Posted 2021-02-20 傲似小仙女

1、HTML

 <div id="searchBar">
    <ul class="items_filter" :class="searchBarFixed == true ? \'isFixed\' :\'\'">
    <li><span class="all">综合</span></li>
    <li><span class="all">综合2</span></li>
    <li><span class="all">综合3</span></li>
    <li><span class="all">综合4</span></li>
    <li><span class="all">综合5</span></li>
</ul>
</div>

 

2、data定义

data() {
    return {
      searchBarFixed:false,
    };
  },

3、在mounted钩子中给window添加一个滚动滚动监听事件

mounted() {
    window.addEventListener(\'scroll\', this.handleScroll)
  },

4、然后在方法中，添加handleScroll方法

methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector(\'#searchBar\').offsetTop
      if (scrollTop > offsetTop) {
        this.searchBarFixed = true
      } else {
        this.searchBarFixed = false
      }
      // console.log(scrollTop,offsetTop)
    },
}

5、添加固定css

.isFixed{
    position:fixed;
}

6,其他的css 根据自己的需求去完成，写在  items_filter  里面即可

最后，在离开页面是需要销毁这个监听事件：

destroyed () {
    window.removeEventListener(\'scroll\', this.handleScroll)
  },

图1为不固定，随页面的滑动而滚动

图2为滑动到一定位置时把筛选条件固定在上面