javascript - 语义 UI 粘滞模块不工作

Question

我试图让我的菜单栏有粘性，但出于某种原因它没有做任何事情。

如语义 UI 文档中所述:

Sticky content attaches itself to the viewport when it is passed

但是我的导航栏一旦通过就不会粘在顶部。

有人知道这是为什么吗？

标记:

<div id="example1">
    <div class="ui sticky">
      <div style="clear:both" class="ui teal menu">
  <a class="active item">
    <i class="home icon"></i> Home
  </a>
  <a class="item">
    <i class="info icon"></i> About 
  </a>
  <a class="item">
    <i class="book icon"></i> Read
  </a>
  <a class="item">
    <i class="edit icon"></i> Write
  </a>


  <div class="ui right menu">

    <a class="item" id="logIn">
    <i class="user icon"></i> Log In 
  </a>
  <a class="item" href="signup">
    <i class="signup icon"></i> Sign Up 
  </a>

  </div>

</div>
</div>
</div>

JavaScript:

$(document).ready(function(){
     $('.ui.sticky')
  .sticky({
    context: '#example1'
  });
  })

编辑

这是一个link到网站。

Answer 1

你确定你没看错吗？

这是一个包含您的代码的代码笔，对我来说效果很好: http://codepen.io/anon/pen/jEYXGG

这是我用的:

<div id="example1">
 <div class="ui sticky">
  <div style="clear:both" class="ui teal menu">
  <a class="active item">
   <i class="home icon"></i> Home
  </a>
  <a class="item">
   <i class="info icon"></i> About 
  </a>
  <a class="item">
   <i class="book icon"></i> Read
  </a>
  <a class="item">
   <i class="edit icon"></i> Write
  </a>
  <div class="ui right menu">
   <a class="item" id="logIn">
    <i class="user icon"></i> Log In 
   </a>
   <a class="item" href="signup">
    <i class="signup icon"></i> Sign Up 
   </a>
  </div>      
 </div>
 ... Added some content here ...
</div>