vue监听滚动事件实现元素吸顶

偏执的太偏执、 2023-06-14 04:27 40阅读 0赞

添加滚动监听事件：

mounted () \{  
  window.addEventListener('scroll', this.handleScroll)  
\},

页面销毁需要取消监听：

destroyed()\{

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

\}

使用：

<template>

<div class="hello">

<div style="height:800px;border:1px solid blue;"></div>

<div class="nav" :class="navStatus">

<ul>

<li>导航1</li>

<li>导航2</li>

<li>导航3</li>

<li>导航4</li>

<li>导航5</li>

</ul>

</div>

<div style="height:800px;border:1px solid red;"></div>

<div style="height:800px;border:1px solid blue;"></div>

<div style="height:800px;border:1px solid red;"></div>

</div>

</template>

<script>

export default \{

name: 'HelloWorld',

data () \{

return \{

navStatus:''

\}

\},

mounted:function ()\{

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

\},

methods: \{

handleScroll()\{

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

var offsetTop = document.querySelector('.nav').offsetTop;

console.info(scrollTop,offsetTop)

if(scrollTop>=800)\{

this.navStatus='fixed'

\}else\{

this.navStatus=''

\}

\},

\},

destroyed()\{

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

\}

\}

</script>

<style scoped lang="scss">

.nav\{

background: \#000;

ul li\{

float: left;

width: 100px;

color: \#fff;

\}

&.fixed\{

position:fixed;

top: 0px;

\}

\}

</style>

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 41 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 269 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 259 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 415 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 01:29/ 0 赞/ 676 阅读

相关小程序制作吸顶菜单（监听滚动条）

1.使用onPageScroll()函数监听滚动条 onPageScroll(e){ //参数e会返回滚动条滚动的高度 console.lo

蔚落/ 2022年02月01日 14:47/ 0 赞/ 703 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 380 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 723 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 569 阅读

相关 vue中实现元素吸顶效果

效果图： ![20210502105208962.gif][] 注意：窗口会抖动，体验不是很好，后期再优化代码实现： <template>

分手后的思念是犯贱/ 2021年07月25日 13:40/ 0 赞/ 977 阅读