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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
Underscore源码分析
Dec 30 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
vue最简单的前后端交互示例详解
Oct 11 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
用jscript启动sqlserver
2007/06/21 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python实现log日志的示例代码
2018/04/28 Python
python中partial()基础用法说明
2018/12/30 Python
django中瀑布流写法实例代码
2019/10/14 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python 实现任务管理清单案例
2020/04/25 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
企业宗旨标语
2014/06/10 职场文书
应届生自荐信
2014/06/30 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书