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样式.
vue监听滚动事件-元素固定位置显示的更多相关文章
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- vue2.0 添加监听滚动事件
export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
随机推荐
- Codeforces Round #436 E. Fire(背包dp+输出路径)
题意:失火了,有n个物品,每个物品有价值pi,必须在时间di前(小于di)被救,否则就要被烧毁.救某个物 品需要时间ti,问最多救回多少价值的物品,并输出救物品的顺序. Examples Input ...
- Numpy一文全了解
1,Numpy是一个python包,它是一个由多维数组对象和处理数组的例程集合组成的库. 2. Numpy的操作:(1)数组的算数和逻辑运算 :(2)傅里叶变换和用于图形操作 (3)与线性代数有 ...
- 获取当前div中的文本(只获取当前div的, 子元素不要, 基于layui)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- python中的集合
在python中,普通集合是可变数据类型 通过以下案例说明: >>> s = {1, 2, 3, 4} >>> id(s) 2108634636808 >&g ...
- JS——按钮点击事件累加注册问题
最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...
- python-django(框架结构)
项目架构: 最外层myshop目录:项目的容器,没有实质性的作用 .idea:项目的配置信息.这个文件夹是自动生成,版本控制信息等,包括历史记录.无用 manage.py:(管理项目)一个实用的命令行 ...
- 实用矩阵类(Matrix)(带测试)
引言: 无意间看到国外一个网站写的Matrix类,实现了加减乘除基本运算以及各自的const版本等等,功能还算比较完善,,于是记录下来,以备后用: #ifndef MATRIX_H #define M ...
- IDEA中,将项目加入maven管理。
在项目上右键->Add Framework Support Choose Maven 生成pom.xml 在<project>下配置国内仓库 <properties>&l ...
- win10操作系统上,wireshark抓取https。
今天试了下使用wireshark抓https的包 一.记录如下: 配置一个环境变量SSLKEYLOGFILE为D:\Temp\sslog.log(这个文件需要自己去创建). 去下载一个chrome浏览 ...
- Python-lambda表达式和推导式
lambda表达式和推导式,可实现使用一行语句完成功能开发的效果,减少代码量. 1.lambda表达式 匿名函数,即没有名字的函数 1.1基本语法: lambda argument_list: exp ...