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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
javascript实现数字时钟效果
Feb 06 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清除缓存程序
2009/08/25 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php常用图片处理类
2016/03/16 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python pandas库中的isnull()详解
2019/12/26 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
如何设置Java的运行环境
2013/04/05 面试题
会计助理的岗位职责
2013/11/29 职场文书
家庭教育的心得体会
2014/09/01 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
田径运动会广播稿
2015/08/19 职场文书