纯原生JS/CSS实现上下滚动切换导航栏下边框颜色（平滑无插件）

实现逻辑说明 #

完全基于原生CSS、JS开发，无第三方依赖：

• 靠CSS transition实现边框颜色的平滑过渡效果
• 监听页面滚动事件，对比前后滚动位置判断滚动方向
• 通过切换导航栏的类名，对应切换不同的边框预设色
• 用原生requestAnimationFrame做性能优化，避免高频滚动导致的卡顿

第一步：完善CSS样式 #

保留你原有导航栏的核心样式，新增过渡属性与两个状态对应的边框色类：

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #EAEAEA;
  background-color: white;
  /* 新增：为边框颜色配置平滑过渡规则 */
  transition: border-bottom-color 0.3s ease;
}

/* 向下滚动状态的边框色，色值可按需自定义 */
.nav--scrolling-down {
  border-bottom-color: #C4C4C4;
}

/* 向上滚动状态的边框色，色值可按需自定义 */
.nav--scrolling-up {
  border-bottom-color: #EAEAEA;
}

第二步：编写原生JS逻辑 #

直接放在页面</body>标签前即可，无需引入任何外部资源，完全适配你现有的HTML结构：

// 获取导航栏DOM节点
const nav = document.querySelector('.nav');
// 记录上一次的滚动位置
let lastScrollY = 0;

window.addEventListener('scroll', () => {
  // 用requestAnimationFrame做原生节流，降低滚动事件的性能消耗
  requestAnimationFrame(() => {
    // 获取当前垂直滚动距离，兼容各浏览器
    const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;

    // 滚动到页面顶部时，恢复导航栏初始边框样式
    if (currentScrollY <= 0) {
      nav.classList.remove('nav--scrolling-down', 'nav--scrolling-up');
      lastScrollY = currentScrollY;
      return;
    }

    // 对比前后滚动位置判断滚动方向，切换对应类名
    if (currentScrollY > lastScrollY) {
      // 向下滚动场景
      nav.classList.add('nav--scrolling-down');
      nav.classList.remove('nav--scrolling-up');
    } else {
      // 向上滚动场景
      nav.classList.add('nav--scrolling-up');
      nav.classList.remove('nav--scrolling-down');
    }

    // 更新滚动位置记录
    lastScrollY = currentScrollY;
  });
});

效果说明 #

• 切换颜色时的平滑过渡完全由CSS控制，无JS动画插值，视觉流畅度和主流大厂的导航交互体验一致
• 两个状态的边框色值可直接替换为项目预设的设计值，不需要调整核心逻辑
• 滚动性能经过优化，在长页面、低配置设备上也不会出现掉帧

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