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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
vue上传图片组件编写代码
Jul 26 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
axios如何取消重复无用的请求详解
Dec 15 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
javascript各种复制代码收集
2008/09/20 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python入门学习之字符串与比较运算符
2015/10/12 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python实现文字版扫雷
2020/04/24 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
无传销社区工作方案
2014/05/13 职场文书
关于环保的标语
2014/06/13 职场文书
道歉短信大全
2015/05/12 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书