语义UI粘性模块无法正常工作

问题描述 投票:3回答:1

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

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

编辑

这是该网站的link

javascript css sticky semantic-ui
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.