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。

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

我不知道我是否遗漏了任何东西，但我还是把侧边栏放在推杆外面。我也试过粘性课，没有运气。

有什么想法吗？提前致谢

Answer 1

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

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

它按预期工作。请参阅更新的fiddle。

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

1 个答案: