vue3页面滚动到一定位置改变导航颜色

最新推荐文章于 2024-08-23 12:08:38 发布

性野喜悲

最新推荐文章于 2024-08-23 12:08:38 发布

阅读量446

点赞数 2

分类专栏： vue 经验分享文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/leng0920/article/details/136946754

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

<template>
  <nav :style="{ backgroundColor: navBackgroundColor }">
    <!-- 导航栏内容 -->
  </nav>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const navBackgroundColor = ref('transparent');
 
function handleScroll() {
  //window.innerHeight为屏幕高度或者 假设导航栏高度是60px，就把window.innerHeight替换成60
  const navHeight = window.innerHeight; 
  if (window.scrollY >= navHeight) {
    navBackgroundColor.value = 'blue'; // 根据需要改变颜色
  } else {
    navBackgroundColor.value = 'transparent'; // 根据需要改变颜色
  }
}
 
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});
 
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>
 
<style>
/* 确保页面内容足够长 */
body, html {
  height: 2000px;
}
</style>