使用 jquery 进行粘性导航答案

【问题标题】：Sticky navigation with jquery使用 jquery 进行粘性导航
【发布时间】：2013-08-28 15:22:17
【问题描述】：

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

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

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

【问题讨论】：

试试 $(".navbar")，所以 with 引号

标签： jquery html css navigation sticky

【解决方案1】：

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

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

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

【讨论】：