UIKit CSS：在 <article> 标签之间插入粘性侧边栏

Question

我想解决以下问题：

我有类似的东西

<article class="uk-article">
 <h1 class="uk-article-title">Test</h1>
 <div class="navi uk-panel uk-panel-box navi-sidebar">
  <ul class="navi-list ">
   <li class="navi-list-item"><a href="#" class="navi-link node-name--H1  is-active-link">Test</a></li>
  </ul>
 </div>
 <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu etiam vel aenean augue cum diam, dictumst elementum tristique pretium velit felis. Tristique mi sodales morbi cum urna potenti mollis per, sollicitudin nam dignissim fermentum dis id purus, risus congue pretium aenean cras consequat viverra. Vivamus dolor mattis sem neque vel etiam, ridiculus habitant est diam eros lorem, aptent pharetra tempus iaculis consectetur. A ultrices condimentum dictum tempor non fusce, velit habitant nunc lectus phasellus. Urna erat ullamcorper fringilla vestibulum habitant maecenas commodo posuere pellentesque cras, aptent fames etiam pretium et habitasse ante libero duis.</p>
</article>

您可以在此处查看实际效果：

https://uikitplay.com/plays/FXuH

现在我想覆盖 class test 并将其移动到右侧（类似于粘性菜单，不会覆盖文章的内容）。

重要提示：HTML-结构不能改变。必须使用 CSS.

来完成

正如我所写，div 应该不会覆盖文章，它应该只粘在文章区域内。所以它不应该显示在页脚或导航栏上。

我图解了：

有什么想法可以让它工作吗？

Answer 1

首先，尽量控制article和navi的宽度。比方说，将它们添加到 90% 到 10%。使导航位置绝对 - 从布局中脱颖而出。添加 data-uk-sticky 属性。请记住导航宽度中的 !important，因为当粘性处于活动状态时它会变得更大。也许给 navi 添加更多高度，使其看起来像全宽列导航。

我已经从你的游戏中分叉了。当然，您可以通过其他方式解决此问题。这只是我的建议。我个人不喜欢 !important 出现在 css:)

https://uikitplay.com/plays/FXuI

编辑

侧边栏在粘性上开始稍微放大，英国面板获得更多填充。你可以缩短一点：

.navi.uk-active .uk-panel-box {
  padding:0;
}

UIKit CSS：在 <article> 标签之间插入粘性侧边栏

UIKit CSS: Insert sticky sidebar between <article>-tags

html

javascript

css

getuikit