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实现的浮动层框架用法实例分析
Oct 10 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
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脚本的10个技巧(5)
2006/10/09 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python 爬虫模拟登陆知乎
2016/09/23 Python
django实现前后台交互实例
2017/08/07 Python
python自动化生成IOS的图标
2018/11/13 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python笔试面试题小结
2019/09/07 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python可以实现栈的结构吗
2020/05/27 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
会计助理的岗位职责
2013/11/29 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2015年公司新年寄语
2014/12/08 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
学校运动会感想
2015/08/10 职场文书