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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
json字符串传到前台input的方法
Aug 06 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设计模式 Builder(建造者模式)
2011/06/26 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
pyqt5实现登录界面的模板
2020/05/30 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
为什么使用接口?
2014/08/13 面试题
C#面试题问题集
2016/04/02 面试题
工程力学专业自荐信范文
2014/03/17 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
绵山导游词
2015/02/05 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL