vue 滑动置顶功能_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 watch 修改滚动条_vue实现滚动监听,点击瞄点平滑滚动,控制内嵌滚动条滚动...
滚动效果 当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...
- vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
- Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没 效果图 好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色 吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
- vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
- Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 随着滚动条下拉,导航栏置顶
随着滚动条下拉,导航栏置顶 想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图 先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
- 利用vue进行页面滚动监听,上拉刷新
2019独角兽企业重金招聘Python工程师标准>>> 1.利用vue进行页面滚动监听,上拉刷新 methods: {handleScroll(){let page = docume ...
- JS实现滚动监听以及滑动到顶部
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
最新文章
- 仿余额宝数字跳动效果 TextCounter
- nginx如何解决超长请求串
- 2015二级c语言题库,2015年计算机二级C语言测试题及答案(9)
- 为什么UART串口通信要16倍过采样数据
- @PropertySource@ImportResource@Bean
- 宿舍管理系统项目管理师_2020下半年信息系统项目管理师真题——案例分析(带解析)...
- C语言 Hello World - C语言零基础入门教程
- c语言 socket 报文解析,C语言实现Socket简单通信
- 基于单机hdfs安装hive
- android qq音乐api使用,QQ音乐API
- 我是一个大器晚成的投资人
- python中iter函数_Python基础:iter函数的两个参数
- 40多年祖传中医的临床经验总结(收藏)
- 专访溢唐数据:拒掉70%想链改的客户,订单依然排到明年6月
- Cisco IGRP
- 国际清算银行:多国央行进行CBDC研究 仅少数推出具体计划
- flink的map等常用api失效(记一次许久未写flink的坑)
- 到客户现场进行项目开发流程
- MATLAB中常见数字信号处理相关函数汇总
- 谈PLM和ERP的差异比较
热门文章
- 【error】深度优先搜索TypeError: unhashable type: ‘list‘
- 【图像处理】——特征匹配(SIFT特征检测器+FLANN特征匹配方法+KNN近邻最优匹配筛选)——cv.xfeatures2d.SIFT_create()sift.detectAndCompute
- 机器学习——支持向量机SVMpython实现
- Pytorch基础(五)—— 池化层
- 安卓9.0官方系统升级包_华为、荣耀公布可升级安卓10.0机型,你的手机在名单之内吗?...
- Fisher线性判别算法原理及实现 MATLAB
- vue+webpack+npm dev环境下内存溢出解决办法
- oracle长连接超时设置
- navicat的安装
- 表驱动法——直接访问表示例1