html - 侧边栏内的语义 ui 固定菜单

Question

我尝试(到目前为止没有成功)设置一个带有固定菜单的侧边栏。

例子:

<div class="ui vertical right sidebar">
  <div class="ui top pointing menu fixed">
    <a class="active item">Infos</a>
  </div>
  <div class="ui segment" style='padding-top:45px;'>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
          <p>Eins, zwei, drei, vier
              <br/>Fünf, sechs, sieben, acht
              <br/>Uno, due
              <br/>Três, quatro
              <br/>One, two
              <br/>Ichi, ni, san, chi
              <br/>Adjin, dva, tri
              <br/>Li, tva, tri
              <br/>
          </p>
    </div>
</div>
    <div class="ui top fixed menu">
        <div class="ui title borderless item launch button">Numbers</div>
    </div>
<div class="pusher">

</div>

这是 jsfiddle .

但是当侧边栏内容滚动时，菜单不是固定的。

我不知道我是否遗漏了什么，但我注意将侧边栏放在推送器之外。我也试过 sticky 类，但没有成功。

有什么想法吗？ 提前致谢

Answer 1

我找到了一个非常简单的 css 解决方案，将以下属性添加到容器段:

#segm{
overflow-y: scroll;
position: absolute;
height: 100%;
width:100%;
padding: 0;
margin: 0;
}

它按预期工作。查看更新的 fiddle .