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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
字符串反转_JavaScript
Apr 28 Javascript
JS前端笔试题分析
Dec 19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
原生js实现简单轮播图
Oct 26 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
JS实现日期加减的方法
2013/11/29 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python3实现微型的web服务器
2019/09/03 Python
python pygame实现球球大作战
2019/11/25 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
高中生自我鉴定范文
2013/10/30 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
好好学习保证书
2015/02/26 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python