在vue页面监听中如何修改子元素的样式

2024-02-05 16:06:34

项目原先代码：

需要实现的是导航栏在页面下滑到一定位置的时候，对其样式进行修改
父组件system.vue页面

<template>  
<div>
	<div id="sysytem">
		<!-- 导航栏 -->
		<head-tabbar  ref ="tabbar" class="tabbar"></head-tabbar>
		<!-- 轮播图 -->
		<el-carousel class="lunbo" :interval="3000" arrow="always">
			<el-carousel-item
			  v-for="(item, index) in bg_img"
			  :key="index">
			  <img :src="'data:image/png;base64,'+ item" class="lunbo_img" alt="轮播图">
			</el-carousel-item>			
		</el-carousel>
	</div>	
</div>
</template>

父组件的样式system.vue页面

子绝父相原理使导航栏和背景图重叠在一起，并让导航栏悬浮在图片上

    #sysytem {
        position: relative;
        width: 100%;
        height: 600px;      
    }
    
    .tabbar {
        position: absolute;
        height: 80px;
        width: 94%;
        left: 3%;
        z-index: 999;
    }
    
    .lunbo {
        position: absolute;
        height: 600px;
        z-index: 1;
    }

预想实现和代码：

现在想实现海致星图官网的导航栏效果

监听页面滚动
在methods中定义一个方法

 methods: {
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var tabbar = document.querySelector('.tabbar');
                console.log("tabbar节点", tabbar);

                if (scrollTop >= 600) {
             
                    //滚动大于600（超过图片）的时候要做的操作
                    //定位改为固定定位，始终位于窗口视图的顶端，并且改颜色为白色和设置边框阴影
                    tabbar.style.position = "fixed";
                    tabbar.style.boxShadow = " 0 2px 4px 0 rgb(21 134 223 / 10%)";
                    tabbar.style.backgroundColor = "rgba(255, 255, 255, 0.8)"; 
                } else if (scrollTop > 0) {
                
                    //滚动大于0小于600（在图片内部）的时候要做的操作
                    //定位改为固定定位，始终位于窗口视图的顶端，并且改颜色为黑色设置透明度
                    tabbar.style.position = "fixed";
                    tabbar.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
                } else {
                
                    //等于0（导航栏在顶部）的时候要做的操作
                    //改为初始的绝对定位，并且颜色改为透明，边框阴影去掉
                    tabbar.style.position = "absolute";
                    tabbar.style.backgroundColor = "transparent";
                    tabbar.style.boxShadow = "";
                   
                }
            }
   }