如何獲得語義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的例子是調整大小以適合的，而不是推視口的外部或放入容器，你的視口的大小改變頁面的寬度。

下面是一個例子的jsfiddle：https://jsfiddle.net/bpoguom4/3/show/

運行片段全屏和調整窗口的大小，看看我的意思。

$('.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

您可能需要在語義/ components文件夾中包含sticky.min.css。