jquery - 使用 jquery 的粘性导航

Question

我正在使用 gumby 框架。我正在使用这样的菜单:

 <section class="page" id="portfolio" data-slide="portfolio" data-stellar-background-ratio="0.5">

  <header id="navigazione">
    <div class="navbar" id="nav1">
      <div class="row">
        <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
        <h1 class="four columns logo">
          <a data-slide="home" href="#">
            <img src="img/gumby_mainlogo.png" gumby-retina />
          </a>
        </h1>
        <ul class="eight columns">
          <li data-slide="portfolio"><a href="#">Portfolio</a></li>
          <li data-slide="about"><a href="#">Chi sono</a></li>
          <li data-slide="contact"><a href="#">Contatti</a></li>
        </ul>
      </div>
    </div>
  </header>

</section>

这是一个单页网站。使用 stellar.js，我可以在视差效果下滚动整个网站。

现在我希望这个导航栏在我滚动时是粘性的(导航栏在网站的第二部分，有一个主页部分，然后是投资组合等等......)

所以我尝试使用 jquery waypoint 并使用语法

$(.navbar).waypoint('stycky');

但是什么也没发生...该插件有效，因为如果我这样做:

    $(.navbar).waypoint(function() {
alert('pippo');
});

有效!我不知道该怎么办。我也尝试过其他插件，比如 smint，但什么也没发生……!另一件奇怪的事情是如果我这样做

$(.navbar).fadeOut();

$(.navbar).waypoint(function() {
   $(.navbar).fadeIn('slow');
});

脚本有效但动画无效...

我希望有人能帮助我理解这一点...因为我很生气...非常感谢

Answer 1

• 应该是 'sticky' 而不是 'stycky'。

您的 Navbar CSS 类是否也将位置设置为“固定”？您应该确认 Waypoint Sticky 可以正常工作

http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/