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代码，我使用的是数据英语而不是英语（也可以正常工作）

.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

您使用的是长官，您只需要修改代码，滚动时就已经添加了“ uk-active”类。因此，将背景色放置在.uk-active类上。

粘贴时，GetUIKit Sticky Navbar会更改背景颜色

2 个答案: