UIkit的Sticky组件为啥不生效？

夏侯法霞提问于 2026-03-11 20:10:21 阅读 40

组件

我在用UIkit做导航栏固定，但加了data-uk-sticky后完全没反应，滚动页面时导航还是跟着走。是不是哪里写错了？

我试过加上offset和show-on-up这些属性，也检查了是否引入了uikit.js，但就是不动。控制台也没报错。

<nav class="uk-navbar-container" data-uk-sticky="offset: 80">
  <div class="uk-container">
    <div class="uk-navbar">
      <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#" rel="external nofollow" >Logo</a>
      </div>
    </div>
  </div>
</nav>

Sticky粘性 UI框架

我来解答赞 4 收藏

反馈

2 条解答

UI素玲 Lv1

UIkit的Sticky组件不生效，问题可能出在几个地方。首先检查下你的HTML结构和引入顺序。

data-uk-sticky现在应该用uk-sticky了，UIkit更新过。然后确保uikit.js是在body结束前加载的，并且jquery也在之前加载。



<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.22/dist/js/uikit.min.js"></script>

试试把你的代码改成这样：



<nav class="uk-navbar-container" uk-sticky="offset: 80">

  <div class="uk-container">

    <div class="uk-navbar">

      <div class="uk-navbar-left">

        <a class="uk-navbar-item uk-logo" href="#">Logo</a>

      </div>

    </div>

  </div>

</nav>

最后确认下css文件也正确引入了，有时候样式冲突也会导致sticky失效。直接用这个改完应该就能行了。要是还不行就看看控制台network看js文件是不是都成功加载了。

2026-03-29 18:15

Mr.君杰 Lv1

大概率是你只引了核心库，没引sticky组件。UIkit 3把sticky拆出来了，得单独引入uikit.sticky.min.js：

<script src="uikit.min.js"></script>

<script src="uikit.sticky.min.js"></script>

引完就动了，不复杂。

2026-03-11 20:11