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静态的url如何传递
May 03 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
详解jQuery中的事件
Dec 14 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
javascript实现简单打字游戏
Oct 29 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
PHP html_entity_decode()函数讲解
2019/02/25 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
python错误处理详解
2014/09/28 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
python调用百度语音REST API
2018/08/30 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
对python中list的五种查找方法说明
2020/07/13 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
庆祝教师节标语
2014/10/09 职场文书
费城故事观后感
2015/06/10 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python