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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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&amp;&amp;mysql)四
2006/10/09 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
jQuery中each方法的使用详解
2018/03/18 jQuery
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
小学少先队活动总结
2015/05/08 职场文书
民事诉讼代理词
2015/05/25 职场文书
导游词书写之黄山
2019/08/06 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js