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样式.

vue监听滚动事件-元素固定位置显示的更多相关文章

  1. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  2. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  3. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  4. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  5. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  6. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  7. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. Linux中 ./configure --prefix命令

    源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install),具体的安装方法一般作者都会给出文档,这里主要讨论配置(configure).Configu ...

  2. java 安装教程

    https://www.cnblogs.com/xuyangblog/p/5455381.html

  3. jQuery判断鼠标滚动方向

    var scrolltop = new Array(); var index = 0; scrolltop[0] = 0; $(document).scroll(function(){ index + ...

  4. Python数据分析学习(一):Numpy与纯Python计算向量加法速度比较

    import sys from datetime import datetime import numpy as np def numpysum(n): a = np.arange(n) ** 2 b ...

  5. angularJS+KindEditor无法获取或清空textarea的值

    在html页面中初始化KindEditor: <script type="text/javascript"> var editor; KindEditor.ready( ...

  6. 随便说说sequelize的问题

    最近在做的项目频繁的修改数据库让人感觉很烦躁,sequelize在执行sync的时候只会重新创建表,如果原先有数据只能直接删除,但是这样显然是不行的,因为数据不能就这么消失了吧. 所以必须要migra ...

  7. CP IPS功能测试

    测试环境:CP 15000硬件 测试拓扑: Step1:重新安装Check_Point_R80.10_T479_Gaia并且打补丁 Step2:初始化CP并且部署模式为Management和Gatew ...

  8. CentOS7更改运行级别

    Step 1:查看系统默认运行级别 [root@node-1 html]# systemctl get-default       //图形界面graphical.target [root@node- ...

  9. java mail 接收邮件

    package com.mw.utils; import com.mw.bean.SmsAlarmLogBean; import javax.mail.*; import javax.mail.int ...

  10. ERRORS !MySQL 和 Javaweb 的报错合集

    ERROR:1175. You are using safe update mode and you tried to update a table without a WHERE that uses ...