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,firefox测试通过)
Nov 14 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
搭建一个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桌面中心(三) 修改数据库
2007/03/11 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Jquery操作radio的简单实例
2014/01/06 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
前台文员职责范本
2014/03/07 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014财务年度工作总结
2014/11/11 职场文书
黄石寨导游词
2015/02/05 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript