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

专门使用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的代码兼容的简单解决方案，我愿意尝试！谢谢！！

最佳答案

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

关于html - 粘滞时GetUIKit粘滞导航栏更改背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49930074/