如何使用GetUIKit框架实现粘性导航栏粘顶时切换背景色

我来帮你搞定这个GetUIKit粘性导航的背景色切换问题！其实很简单，利用UIkit自带的sticky组件事件，配合自定义CSS类就能轻松实现，具体步骤如下：

1. 调整HTML结构，添加自定义初始样式类 #

首先给你的导航容器加上一个初始蓝色背景的自定义类，同时确保data-uk-sticky属性配置正确：

<nav class="uk-navbar-container navbar-blue" uk-navbar data-uk-sticky="top: 0">
  <div class="uk-navbar-center">
    <ul class="uk-navbar-nav">
      <li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
      <li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
      <!-- 你的其他菜单项 -->
    </ul>
  </div>
</nav>

这里的top: 0表示当导航滚动到屏幕顶部位置时触发固定效果，你可以根据需求调整这个数值。

2. 编写CSS样式，定义两种背景状态 #

添加两个自定义类，分别对应蓝色初始状态和白色固定状态，顺便加上过渡动画让切换更平滑：

/* 初始蓝色背景 */
.navbar-blue {
  background-color: #2563eb; /* 你可以换成自己想要的蓝色值 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 固定到顶部时的白色背景 */
.navbar-white {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影增强层次感 */
}

3. 利用UIkit事件切换样式类 #

UIkit的sticky组件会在导航固定/取消固定时触发active和inactive事件，我们监听这两个事件来切换CSS类：

document.addEventListener('DOMContentLoaded', function() {
  // 获取导航元素
  const navbar = document.querySelector('.uk-navbar-container');

  // 导航固定到顶部时，切换为白色背景
  UIkit.util.on(navbar, 'active', function() {
    this.classList.remove('navbar-blue');
    this.classList.add('navbar-white');
  });

  // 导航回到原始位置时，恢复蓝色背景
  UIkit.util.on(navbar, 'inactive', function() {
    this.classList.remove('navbar-white');
    this.classList.add('navbar-blue');
  });
});

这段代码要确保在DOM加载完成后执行，所以包裹在DOMContentLoaded事件里更稳妥。

这样一来，当你滚动页面让导航固定到顶部时，背景色就会平滑地从蓝色切换为白色；滚动回顶部让导航回到原位时，又会恢复成蓝色啦！

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