Semantic UI粘性模块无法正常工作

Question

我试图使我的菜单栏粘性，但出于某种原因它没有任何作用。

如Semantic-UI文档所述：

当内容被传递时，粘性内容会附加到视口上

然而，我的导航栏一旦过去就不会粘在顶部。

有人知道这是为什么吗？

标记：

<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'
  });
  })

EDIT

Here is a link to the site.

- user3574492

Answer 1

你确定你正在正确地检查它吗？

这是一个包含你的代码的codepen，对我来说工作正常： 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>

- Łukasz Mazan

---

这很奇怪，我在多个浏览器上都进行了检查，但它对我来说不起作用。这是现场网站的链接http://talk.hostoi.com/Semantic-UI/examples/index.php。也发布在上面的编辑中。希望有人能找出阻止我的标记发生的原因。 - user3574492

你正在使用的 #example1 只包含菜单，这就是问题所在。请注意，在我的 CodePen 中，#example1 包含了整个长内容。因此，请尝试在没有上下文的情况下声明 sticky，或者使用 #home。 - Łukasz Mazan

我已经尝试了两种方法，尝试更改＃example1以便它包含整个文档，但仍然没有任何反应，还尝试使用context：'#home';声明sticky，以便它使用body标签，但仍然可以从现场的源代码中看到没有任何反应。 - user3574492

它对我不起作用！ - Muhammad Faizan Fareed