UIkit Sticky导航栏滚动到顶部时突然消失怎么办？

诗雅提问于 2026-02-14 06:09:24 阅读 42

组件

我在用UIkit的Sticky组件做固定导航栏，滚动到页面顶部时导航栏突然消失了，但往下拉又会出现，这是怎么回事？

代码结构是这样的：


<nav class="uk-navbar-container" uk-sticky>
  <ul class="uk-navbar-nav">
    <li><a href="#" rel="external nofollow"  rel="external nofollow" >首页</a></li>
    <li><a href="#" rel="external nofollow"  rel="external nofollow" >关于</a></li>
  </ul>
</nav>

已经确认引入了UIkit的JS和CSS文件，其他页面元素都能正常滚动，只有这个导航栏在顶部位置会消失。试过给nav加!important的position:fixed也不行，求大神指条明路…

UI框架前端框架

我来解答赞 5 收藏

反馈

1 条解答

Dev · 卫华 Lv1

这个问题我之前也遇到过，挺烦人的。其实是因为UIkit的Sticky组件在滚动到顶部时会自动添加一个类名 uk-sticky-reset，这个类会让导航栏隐藏。这是它的默认行为，但很多时候我们并不需要这种效果。

解决方法很简单，你可以通过CSS覆盖掉这个类的行为。比如加一段样式：

.uk-sticky-reset {

  display: block !important;

  opacity: 1 !important;

}

另外，如果你希望导航栏一直固定在顶部不消失，建议给 uk-sticky 加个属性 show-on-up，像这样：

<nav class="uk-navbar-container" uk-sticky="show-on-up: false;">

  <ul class="uk-navbar-nav">

    <li><a href="#">首页</a></li>

    <li><a href="#">关于</a></li>

  </ul>

</nav>

这个属性的意思是禁用“向上滚动时才显示”的效果，导航栏会始终保持可见。

最后提醒一下，别忘了检查你的UIkit版本。如果是v2版本，那它用的是 data-uk-sticky 属性，跟v3的写法不一样，别走弯路了。

2026-02-14 16:06