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基本类型详解
Nov 28 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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实现mysql封装类示例
2014/05/07 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
python实现简单温度转换的方法
2015/03/13 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python使用代理ip访问网站的实例
2018/05/07 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python里dict变成list实例方法
2019/06/26 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
市场营销调查计划书
2014/05/02 职场文书
体育专业求职信
2014/07/16 职场文书
租房协议书样本
2014/08/20 职场文书
世界气象日活动总结
2015/02/27 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
python实现简单倒计时功能
2021/04/21 Python