如何实现Semantic UI Site的粘性菜单

Question

我正在尝试理清Semantic-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/

运行Snippet Full screen并调整窗口大小以查看我的意思。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法弄清楚他们是如何通过语义UI实现这一目标的。这不是框架本身的一部分吗？如果没有，我将如何达到同样的效果？

Answer 1

您可能需要在semantic / components文件夹中包含sticky.min.css。