GetUIKit粘滞导航栏在粘滞时更改背景颜色

Question

我如何让我的粘性导航菜单在使用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代码兼容的简单解决方案，我愿意尝试！谢谢你！！

Answer 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>

​

Answer 2

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