0

我想解决以下问题：

我有类似的东西

<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 不应该覆盖文章，它应该只在文章区域内保持粘性。所以它不应该显示在页脚或导航栏上。

我举例说明：

在此处输入图像描述

任何想法让这个工作？

4

1 回答 1

1

首先，尽量控制文章和导航的宽度。可以说，将它们添加 90% 到 10%。使导航位置绝对 - 从布局中脱颖而出。添加 data-uk-sticky 属性。记住 !important 在导航宽度中的重要性，因为当粘性激活时它会变得更大。也许为导航添加更多高度，使其看起来像全宽列导航。

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

https://uikitplay.com/plays/FXuI

编辑

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

.navi.uk-active .uk-panel-box {
  padding:0;
}
于 2017-07-18T20:13:22.893 回答