如何使用 uikit 将导航栏固定在顶部？答案

【问题标题】：How can I using uikit to fixed the navbar on the top?如何使用 uikit 将导航栏固定在顶部？
【发布时间】：2015-07-02 12:20:31
【问题描述】：

我正在使用uikit css框架，我想将导航栏固定在顶部？

【问题讨论】：

请提供您到目前为止尝试过的代码。

标签： python css uikit mako

【解决方案1】：

将此添加到您的 css 文件中：

.uk-fixed-navigation {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
}

并将uk-fixed-navigtion 类添加到您的导航栏。

编辑

您也可以使用他们的sticky component

【讨论】：

【解决方案2】：

您需要从 UIKit 包中包含“components/sticky.js”文件，并将 data-uk-sticky 指令添加到您的固定栏 div。

例如：

<div data-uk-sticky>...</div>

我建议将它与导航栏组件一起使用，例如：

<nav id='top-bar' class="uk-navbar" data-uk-sticky>
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

【讨论】：