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

脚本有效但不是动画...

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

Answer 1

应该是'粘'而不是'stycky'。

也是Navbar的CSS类，其位置设置为“fixed”？您应该确认Waypoint Sticky的工作原理

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

用jquery粘贴导航

1 个答案: