页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解

本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示，监听滚动事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。

1、监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop,

首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () {

window.addEventListener('scroll', this.handleScroll)

然后在方法中，添加这个handleScroll方法handleScroll () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

console.log(scrollTop)

控制台打印结果：

2、监听元素到顶部的距离并判断滚动的距离如果大于了元素到顶部的距离时，设置searchBar为true,否则就是falsehandleScroll () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

var offsetTop = document.querySelector('#searchBar').offsetTop

if (scrollTop > offsetTop) {

this.searchBarFixed = true

} else {

this.searchBarFixed = false

}

先写一个该元素固定到顶部的样式，isFixed(less写法).searchBar{

.isFixed{

position:fixed;

background-color:#Fff;

top:0;

z-index:999;

}

ul {

WIDTH:100%;

height: 40px;

line-height: 40px;

display: flex;

li {

font-size: 0.8rem;

text-align: center;

flex: 1;

i {

font-size: 0.9rem;

padding-left: 5px;

color: #ccc;

}

border-bottom: 1px solid #ddd;

}

然后将需要固定的元素的class与searchBar进行绑定，如果searchBar为true时，就应用这个isFixed样式

区域
价格
房型
更多

固定后的结果：

注意，如果离开该页面需要移除这个监听的事件，不然会报错。destroyed () {

window.removeEventListener('scroll', this.handleScroll)

页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解相关推荐

vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮
###菜单滚动吸顶效果: ###html: <section class="switchModule" id="switchModule">< ...
html监听页面滚动高度,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
html页面滚动条监听事件,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
监听滚动事件实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
RecycleView 分割线设置及监听滚动状态
一.RecycleView 分割线 ListView中的分割线可以通过属性divider和dividerHeight分别设置颜色值/图片及分割线高度.而RecycleView并没有提供这两个属性设置分 ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录前言一.移除顶部状态栏空白二.帧布局组件三.透明度组件四.监听滚动事件五.完整代码示例六.相关资源前言在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
Vue 设置overflow: auto 后监听滚动距离
overflow: auto 后监听滚动距离 <div class="page-body-inner" @scroll.passive="getScroll($ev ...

页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解

页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解相关推荐

最新文章

热门文章