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数组
May 11 Javascript
js闭包的用途详解
Nov 09 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Vue生命周期示例详解
Apr 12 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue组件添加事件@click.native操作
Oct 30 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
德生9700DX电路分析
2021/03/02 无线电
mysql limit查询优化分析
2008/11/12 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP7 windows支持
2021/03/09 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python实现Decorator模式实例代码
2018/02/09 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
行政管理专业推荐信
2013/11/02 职场文书
工程业务员工作职责
2013/12/07 职场文书
导购员的岗位职责
2014/02/08 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers