zoukankan      html  css  js  c++  java
  • vue js手机端滑到某一个位置时固定位置显示

    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为滑动到一定位置时把筛选条件固定在上面

     

  • 相关阅读:
    oracle 强杀进程
    oracle查询使用频率和磁盘消耗需要缓存大小
    Oracle定时器执行多线程
    Python
    Python- XML模块
    Python-标准库之OS模块
    Python
    Python-时间复杂度
    Python-冒泡排序
    Python-正则表达式
  • 原文地址:https://www.cnblogs.com/lidonglin/p/12831320.html
Copyright © 2011-2022 走看看