사이드 바 내부에 의미있는 메뉴가 고정 된 메뉴

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이다.

그러나 사이드 바 콘텐츠를 스크롤하면 메뉴가 고정되지 않습니다.

내가 놓친 것이 있는지는 잘 모르겠지만 사이드 바를 푸셔 외부에 두는 데 신경을 썼습니다. 나는 또한 행운이없는 끈적한 수업을 시도했다.

아이디어가 있으십니까? 컨테이너 세그먼트에 다음과 같은 속성을 추가 내가 CSS로 매우 간단한 해결책을 발견 한 사전

Answer 1

에 감사 :

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

그리고 예상대로 작동합니다. 업데이트 된 fiddle을 참조하십시오.