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


Posted in Javascript onDecember 13, 2017

最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。

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)
},

控制台打印结果:

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

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 {
 WIDTH: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>

固定后的结果:

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
You might like
linux下实现定时执行php脚本
2015/02/13 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python执行时间的计算方法小结
2017/03/17 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python实现学生成绩管理系统
2020/04/05 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Python 随机按键模拟2小时
2020/12/30 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
区域销售主管岗位职责
2014/06/15 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
保险内勤岗位职责
2015/04/13 职场文书
雨中的树观后感
2015/06/03 职场文书
深入理解python协程
2021/06/15 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL