UIKit CSS:在<UIKit>-标记之间插入粘性侧栏

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

首先，尝试控制文章和navi的宽度。比如说，加90 %到10%。使纳维的位置绝对-从布局中脱颖而出。添加数据-uk-粘性属性。记住！在navi宽度中很重要，因为当粘性活动时，它会变得更大。也许给navi增加更多的高度，使它看起来像全宽度的列导航。

我从你的戏中拿出了叉子。当然，你可以用其他方法解决这个问题。这只是我的提议。我个人不喜欢什么时候！重要出现在css:)

https://uikitplay.com/plays/FXuI

编辑

侧边栏开始放大自己的粘性，英国面板得到更多的填充。你可以把它缩短一点：

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