如何在向下滚动时垂直缩小导航栏？求对应JavaScript实现代码

Hey there! Let's tackle this navigation bar styling on scroll problem. You've already got the CSS sorted out perfectly—now let's hook up the JavaScript to make that transition happen smoothly.

核心实现思路 #

• 监听浏览器的scroll事件，实时获取当前页面的滚动距离
• 设定一个滚动阈值（比如200px，可按需调整），当滚动距离超过阈值时，给导航栏添加adjust类；滚动回到阈值内时移除该类
• 加入防抖函数优化性能，避免滚动事件频繁触发导致不必要的计算

HTML 结构示例 #

<nav class="navbar">
  <!-- 导航内容示例 -->
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
</nav>

CSS 样式（你提供的定义） #

.navbar{ 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  position: fixed; 
  width: 100%; 
  height: 15vh; 
  background-color: transparent; 
  z-index: 1; 
  transition: 0.6s ease; 
}

.navbar.adjust{ 
  background-color: ivory; 
  height: 10vh; 
}

JavaScript 实现代码 #

// 获取导航栏DOM元素
const navbar = document.querySelector('.navbar');

// 防抖函数：优化滚动事件的触发频率
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 处理滚动逻辑的核心函数
function handleScroll() {
  // 自定义滚动阈值，可根据页面需求修改
  const scrollThreshold = 200;
  
  if (window.scrollY > scrollThreshold) {
    navbar.classList.add('adjust');
  } else {
    navbar.classList.remove('adjust');
  }
}

// 给窗口添加防抖后的滚动事件监听
window.addEventListener('scroll', debounce(handleScroll));

关键细节说明 #

• window.scrollY：用于获取当前窗口垂直方向的滚动距离
• 防抖函数：scroll事件在滚动过程中会持续触发，防抖能确保我们的样式切换逻辑只在滚动暂停后执行一次，提升页面性能
• 滚动阈值scrollThreshold：你可以根据页面布局调整这个数值，比如改成100px，或者结合页面特定元素的位置来设置，让样式切换时机更贴合设计需求

内容的提问来源于stack exchange，提问作者Akhin Abraham