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 相关文章推荐
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
JS removeAttribute()方法实现删除元素的某个属性
Jan 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
CodeIgniter模板引擎使用实例
2014/07/15 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
基于javascript实现碰撞检测
2020/03/12 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
wxpython布局的实现方法
2019/11/01 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
函授本科自我鉴定
2013/11/03 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
基层党组织整改方案
2014/10/25 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL