セマンティックUIサイトのスティッキーメニューを理解する方法

Question

セマンティックUIサイトのスティッキーサイドメニューの仕方を整理しようとしています。

• http://semantic-ui.com/elements/button.html
• http://learnsemantic.com/developing/customizing.html#introduction

あなたと一緒にスクロールスティッキーメニュー。

それはleft railまたはright railの内側にあり、かつそのrail documentsまたはsticky documentsの例とは異なり、それは代わりにビューポートの外にしたりなどの容器の中に押し込むビューポートのサイズに合わせてリサイズしますページの幅を変更します。 https://jsfiddle.net/bpoguom4/3/show/

実行スニペットフルスクリーンと私は何を意味するかを見るためにあなたのウィンドウのサイズを変更：ここで

は例JSFiddleです。

$('.ui.sticky').sticky({ 
 
    context: $('.ui.container') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script> 
 

 
<div class="ui text container segment"> 
 

 
<div class="ui left rail"> 
 
    <div class="ui sticky"> 
 
    <div class="ui segment"> 
 
     <div class="ui title"> 
 
     Some Stuff Goes Here 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
    <br>content<br> 
 
</div>

私は、彼らがセマンティックUIでこれを実現する方法を見つけ出すことはできません。これはフレームワーク自体の一部ではありませんか？そうでない場合は、どのように私は同じ効果を達成するだろうか？

Answer 1

semantic/componentsフォルダからsticky.min.cssを含める必要があります。