semantic ui fixed menu inside sidebar

Question

I tried (with no success so far) to set up a sidebar with a fixed menu inside.

Example:

<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>

Here is the jsfiddle.

However, when the sidebar content is scrolled, the menu is not fixed.

I don't know if I missed anything, but I took care of putting the sidebar outside the pusher. I also tried with the sticky class, with no luck.

Any idea ? Thanks in advance

Answer 1

I have found a pretty simple solution with css, adding the following properties to the container segment :

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

And it works as expected. See the updated fiddle.