GetUIKit 粘性导航栏在粘性时更改背景颜色答案

【问题标题】：GetUIKit Sticky Navbar Changes Background Color When StickyGetUIKit 粘性导航栏在粘性时更改背景颜色
【发布时间】：2018-04-19 20:52:20
【问题描述】：

如何让我的粘性导航菜单在专门使用 GetUIKit 框架粘贴到屏幕顶部后更改背景颜色（即蓝色到白色）？

这是我的代码：

<nav class="uk-navbar-container" uk-navbar data-uk-sticky>
        <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>
                <li class="uk-parent"><a href="#resume">resume</a></li>
            </ul>
        </div>
    </nav>

我读过一些关于活跃和不活跃的文章，但我不知道我应该做什么。在这种情况下我宁愿只使用 GetUIKit 框架，但如果有与 GetUIKit 代码兼容的简单解决方案，我愿意尝试！谢谢！！

【问题讨论】：

标签： html css navbar sticky getuikit

【解决方案1】：

如docs 中所写，您需要使用cls-active: uk-navbar-sticky 为活动状态提供一个类

对于有效的 HTML5 代码，我使用的是 data-uk 而不是 uk（效果也很好）

.tall-placeholder {
height: 1000px;
}
.uk-navbar-sticky {
background-color: powderblue!important;
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" />

<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>

<nav class="uk-navbar-container" data-uk-navbar data-uk-sticky="cls-active: uk-navbar-sticky">
    <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>
            <li class="uk-parent"><a href="#resume">resume</a></li>
        </ul>
    </div>
</nav>
<section class="tall-placeholder"></section>

【讨论】：

【解决方案2】：

你正在使用 prefect，你不需要修改代码，当你滚动时它已经添加了一个“uk-active”类。所以将背景颜色放在 .uk-active 类上。

【讨论】：