0

私はガンビーフレームワークを使用しています。私は次のようなメニューを使用しています：

 <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>

これは単一ページの Web サイトです。stellar.js を使用すると、視差効果でサイト全体を分割してスクロールできます。

今、私はスクロールしたときにこのナビゲーションバーが固定されることを望んでいます（ナビゲーションバーはサイトの2番目のセクションにあり、ホームセクション、次にポートフォリオなどがあります...）

だから私はjquery waypointを使用して構文を使用しようとします

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

しかし、何も起こらなかった...プラグインが機能するのは、次の場合です。

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

できます！どうすればいいのかわからない。smint のような他のプラグインも試してみましたが、何も起こりませんでした...! もう1つの奇妙なことは、もし私がそうするなら

$(.navbar).fadeOut();

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

スクリプトは機能しますが、アニメーションは機能しません...

誰かがこれを理解するのを手伝ってくれることを願っています...私は怒っているので...事前にどうもありがとう

4

1 に答える 1

0
  • 「スティッキー」ではなく「スティッキー」にする必要があります。

また、Navbar の CSS クラスの位置が「固定」に設定されていますか? Waypoint Sticky が機能することを確認する必要があります。

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

于 2013-08-28T15:28:58.950 に答える