VUE 实现滚动监听 导航栏置顶的方法


Posted in Javascript onSeptember 11, 2018

HTML

非重点的代码,比如样式啥的,我就不放上来了,一笔带过

简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解

<div :style="{ paddingBottom: paddingBottom}">

 <header>资源信息</header>

 <div>
  <!-- 公司信息 浏览量 -->
 </div>

 <div id="fixedBar" :class="{ fixedBar: isFixed }">
  <!-- 品名 -->
  <!-- 规格 -->
  <!-- 产地 -->
  <!-- 单价 -->
 </div>

 <div :style="{ marginTop: marginTop }">
  <!-- 数据列表 -->
 </div>

 <footer class="footer">
  <button>订阅</button>
  <button>关闭</button>
  <div v-show="advertShow">
   <a @click="del">×</a>
   <img src="./广告.jpg" />
  </div>
 </footer>

</div>

<style>
 .fixedBar {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
 }
</style>

VUE

1. data ()

data () {
 paddingBottom: '1.5rem', // 给最外层div一个padding-bottom
 // 因为footer是fixed定位 如果padding-bottom为0 数据列表拉到最下面的时候 会有部分数据被footer挡住

 isFixed: false, // bar浮动
 offsetTop: 0, // 触发bar浮动的阈值
 marginTop: 0, // 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀

 advertShow: true, // 广告显示
}

2. mounted ()

mounted () {
 // 设置初始的 padding-bottom 值为 footer 的高度 +20 防止数据列表拉到最下面被footer挡住 +多少自定
 this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';

 // 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
 this.offsetTop = document.querySelector('#fixedBar').offsetTop;

 // 开启滚动监听
 window.addEventListener('scroll', this.handleScroll);
}

3. methods

methods: {
 // 关闭广告
 del () {
  this.advertShow = true;
  this.$nextTick(() => {
   this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
  });
 },

 // 滚动监听 滚动触发的效果写在这里
 handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop >= this.offsetTop) {
   this.isFixed = true;
   this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
  } else {
   this.isFixed = false;
   this.marginTop = 0;
  }
 }
}

4. destroyed ()

destroyed () {
 window.removeEventListener('scroll', this.handleScroll); // 离开页面 关闭监听 不然会报错
}

效果图

VUE 实现滚动监听 导航栏置顶的方法

VUE 实现滚动监听 导航栏置顶的方法

VUE 实现滚动监听 导航栏置顶的方法

VUE 实现滚动监听 导航栏置顶的方法

以上这篇VUE 实现滚动监听 导航栏置顶的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 #Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
You might like
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python中的随机函数小结
2018/01/27 Python
Python批量发送post请求的实现代码
2018/05/05 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
初中家长意见
2015/06/03 职场文书
导游词之千岛湖
2019/09/23 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
python读取mnist数据集方法案例详解
2021/09/04 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js