0

我正在使用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');
});

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

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

4

1 回答 1

0
  • 应该是“粘性”而不是“粘性”。

您的导航栏 CSS 类的位置是否设置为“固定”？您应该确认它是为 Waypoint Sticky 工作的

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

于 2013-08-28T15:28:58.950 回答