顶部动态菜单栏的使用

效果图

 

开发环境

vue3

关键逻辑

//导航栏状态选择
const navbarSolid = ref(false);
//初始化导航栏高度
const navbarHeight = ref(0);

/**
 * 根据滚动距离改变样式
 */
function checkNavbarOpacity() {
  navbarSolid.value = window.pageYOffset > navbarHeight.value / 2;
}

/**
 * 绑定window的scroll事件
 */
onMounted(() => {
  // 获取导航栏高度
  navbarHeight.value = document.querySelector('nav').offsetHeight;
  window.addEventListener('scroll', checkNavbarOpacity);
});
/**
 * 解绑window的scroll事件
 */
onUnmounted(() => {
  window.removeEventListener('scroll', checkNavbarOpacity);
});

实现代码