vue实现固定位置显示功能


Posted in Javascript onMay 30, 2019

在vue项目中实现吸顶效果.

比如说,我们要实现的功能是导航栏在页面下滑到一定位置之后,便固定不定。

首先:要在mounted生命周期内监听'scroll'事件,事件触发后,执行一个处理滚动的函数。

window.addEventListener('scroll', this.handleScroll)
  methods:{
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
 }
}
 }

完整源代码如下:

<template>
<div>
 <div class="nav"></div>
<div class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? 'isFixed' :''"> //用v-bind绑定样式
  <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>
<div class="content">
</div>
</div>
</template>
<script>
 export default {
  components:{
  },
mounted () {
 window.addEventListener('scroll', this.handleScroll)
},
    data(){
     return {
      searchBarFixed:false
    } 
 },
  methods:{
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
 }
},
 }
 }
</script>
<style lang="less" scope>
.nav{
 height: 250px;
}
.content{
 height: 1900px;
}
.searchBar{
 .isFixed{
  position:fixed;
  background-color:#Fff;
  top:0;
  z-index:999;
 }
 ul {
  width:100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  li {
   list-style: none;
   font-size: 0.8rem;
   text-align: center;
   flex: 1;
   i {
    font-size: 0.9rem;
    padding-left: 5px;
    color: #ccc;
   }
  }
  border-bottom: 1px solid #ddd;
 }
}
</style>

总结

以上所述是小编给大家介绍的vue实现固定位置显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢! 

Javascript 相关文章推荐
优化javascript的执行效率一些方法总结
Dec 25 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 #Javascript
JS使用cookie保存用户登录信息操作示例
May 30 #Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 #Javascript
Vue使用axios出现options请求方法
May 30 #Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
实用的Vue开发技巧
May 30 #Javascript
vue-router的两种模式的区别
May 30 #Javascript
You might like
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
Vue实现日历小插件
2019/06/26 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
python黑魔法之参数传递
2016/02/12 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
解析Python的缩进规则的使用
2019/01/16 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python代码实现图书管理系统
2020/11/30 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
2014中考励志标语
2014/06/05 职场文书
网络营销计划书
2015/01/17 职场文书
女儿满月酒致辞
2015/07/29 职场文书