vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974
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)
},
vue监听滚动事件 实现某元素吸顶或者固定位置显示的更多相关文章
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- 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 ...
随机推荐
- Redis集成到Spring做mybatis做二级缓存
一.原理: 要缓存的 Java 对象必须实现 Serializable 接口,因为 Spring 会将对象先序列化再存入 Redis,比如本文中的 com.defonds.bdp.city.bean. ...
- 7.5爬取猫眼Top100电影名单
2018-7-5 20:22:57 还有有一丢丢成就感!以后可以爬取简单网站了!比如妹子图片,只是现在不知道咋下载! 正则还是刚看,要多去用正则!正则很强大的东西! #!/usr/bin/env py ...
- ELK(Elasticsearch6.0以上版本head插件安装)
参考:https://www.cnblogs.com/Onlywjy/p/Elasticsearch.html Elasticsearch6.0不能使用命令直接安装head插件 修改配置文件/etc/ ...
- DB2 的代理 (agent)
DB2 的代理 (agent) 是位于 DB2 服务器中的服务于应用程序请求的一些进程或线程.当有外部应用程序连接至 DB2 实例提出访问请求时,DB2 的代理就会被激活去应答这些请求.一般 DB2 ...
- ASP.NET Core 的Windows和IIS宿主(自动翻译记录)
https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetcore2x 支持的操作系统 以下操作系统的支持: Win ...
- Codeforces 44E - Anfisa the Monkey - [水题]
题目链接:http://codeforces.com/problemset/problem/44/E 题意: 给一个字符串,让你分割成 $k$ 行,每行的字母数在 $[a,b]$ 之间. 题解: 这是 ...
- 简单示例用例(Simple Example Use Cases)--hive GettingStarted用例翻译
1.MovieLens User Ratings First, create a table with tab-delimited text file format: 首先,创建一个通过tab分隔的表 ...
- tomcat远程部署war包,显示连接被重置
在tomcat 目录: /opt/apache-tomcat-9.0.13/webapps/manager/WEB-INF/web.xml 下修改: <multipart-config> ...
- php 之数组
PHP之array数组 PHP中的数组实际上是一个有序映射.映射是一种把values关联到keys的类型.此类型在很多方面做了优化, 因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实 ...
- PHP之字符串类型
PHP之存取和修改字符串中的字符 PHP中的字符串,在存储的时候是按照字节存储的.利用一个字节数组存储字符串. PHP一个字符串string就是由一系列的字符组成,其中每个字符等同于一个字节. str ...