zoukankan      html  css  js  c++  java
  • vue监听滚动事件 实现某元素吸顶或者固定位置显示

    1、监听滚动事件

    利用VUE写一个在控制台打印当前的scrollTop,

    首先,在mounted钩子中给window添加一个滚动滚动监听事件,

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

    然后在方法中,添加这个handleScroll方法

    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
    },

    2、监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时,设置searchBar为true,否则就是false

    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

      }
    },

    先写一个该元素固定到顶部的样式,isFixed(less写法)

    .searchBar{
      .isFixed {
        position:fixed; background-color:#Fff; top:0; z-index:999;

      }
      ul {
        100%;

      height: 40px;

      line-height: 40px;

      display: flex;

         li {
            font-size: 0.8rem;

        text-align: center;

        flex: 1;

         i {
              font-size: 0.9rem;

         padding-left: 5px;

         color: #ccc;

         }
         }
         border-bottom: 1px solid #ddd;

      }
    }

    然后将需要固定的元素的class与searchBar进行绑定,如果searchBar为true时,就应用这个isFixed样式

    <div class="searchBar" id="searchBar">

      <ul :class="searchBarFixed == true ? 'isFixed' :''">

        <li>区域<i class="iconfont icon-jiantouxia"></i></li>

         <li>价格<i class="iconfont icon-jiantouxia"></i></li>

         <li>房型<i class="iconfont icon-jiantouxia"></i></li>

         <li>更多<i class="iconfont icon-jiantouxia"></i></li>

       </ul>

    </div>

    注意,如果离开该页面需要移除这个监听的事件,不然会报错。

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

  • 相关阅读:
    聚类算法优秀博客链接
    读安晓辉老师的访谈有感
    机器学习概览之常见算法汇总
    稀疏表达和压缩感知的一些对比
    [Linked List]Reverse Linked List,Reverse Linked List II
    [Linked List]Palindrome Linked List
    [Linked List]Remove Nth Node From End of List
    [Tree]Binary Tree Inorder Traversal
    [Tree]Binary Tree Preorder Traversal
    [stack]Evaluate Reverse Polish Notation
  • 原文地址:https://www.cnblogs.com/starrk-01/p/8241638.html
Copyright © 2011-2022 走看看