zoukankan      html  css  js  c++  java
  • vue监听滚动事件-元素固定位置显示

    1、监听滚动事件

    用VUE写一个在控制台打印当前的scrollTop用来测试是否执行:

    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    }
    
    methods:  {
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
      }
    }
    

    2、监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时,为元素添加 isFixed的class

    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.getElementById('bar').offsetTop
      if (scrollTop > offsetTop) {
        this.barFixed = true
      } else {
        this.barFixed = false
      }
    }
    .isFixed{
       position:fixed;
       background-color:#Fff;
       top:0;
       z-index:999;
    }
    
    <div :class="{isFixed: barFixed}"></div>

    PS:如果离开页面需要移除这个监听的事件

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

    总结:整体思路为监听滚动距离是否大于元素到顶部的距离,来判断是否为元素添加固定css样式.

  • 相关阅读:
    QTdebug时没有调试引擎
    快速排序
    MFC之动态创建按钮
    Linux 本人常用到的基本命令
    history 查看历史操作记录在shell脚本执行中无法显示问题
    C#基础学习5
    C#基础学习4
    C#基础学习3
    C#基础学习1
    C#基础学习2
  • 原文地址:https://www.cnblogs.com/EnderH/p/9376499.html
Copyright © 2011-2022 走看看