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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
express启用https使用小记
May 21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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
我的论坛源代码(七)
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python实现简易云音乐播放器
2018/01/04 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现词法分析器
2019/01/31 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
森林防火标语
2014/06/23 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
联欢会开场白
2015/06/01 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python