1

これらの画像のようなナビゲーション サイドバーを構築するために何週間も試みてきました。

Tommy Hilfiger の左ナビゲーション サイドバー

シンガポール建国記念日パレード 2013 右ナビゲーション サイドバー

Getbootstrap の左ナビゲーション サイドバー

私は Twitter のブートストラップを使用していますが、getbootstrap.com/components には見栄えの良いナビゲーション サイドバーがありますが、ライブラリにはそのようなコンポーネントがなく、作成するのは非常に面倒です。したがって、Tommy Hilfiger のグローバル サイトのようなものを構築しようとして、jquery を使用することにしました。

トミー ヒルフィガーのグローバル サイト

ただし、私はjavascriptとcssを初めて使用します...それらは私の弱点です...特にそれらが縮小されている場合:(そして、矢印マーカーを作成して移動(アニメーション化)させ、常に指さすことに固執しています現在のセクションに. ページのスクロールをアニメーション化することはできましたが、これまでの WIP は次のとおりです。

WIP - Twitter ブートストラップ ナビゲーション サイドバー

そのセクション インジケーター アニメーションを実現するためのオープン ソース コンポーネント (またはできればブートストラップ コンポーネント) はありますか?

スクリプトが乱雑になりつつあるので、オープン ソース コンポーネントが非常に望ましいですが、それを実現する方法に関する情報 (スクリプトの例を添えてください) も大歓迎です.. よろしくお願いします!

4

1 に答える 1

1

ブートストラップ自体に存在するコンポーネントである ScrollSpy を確認してください。

ブートストラップスクロールスパイ

から抽出:

https://stackoverflow.com/a/14366014/474330

activateしたがって、ここで説明されているスクロール スパイ イベント を使用する必要があります: http://twitter.github.com/bootstrap/javascript.html#scrollspy

基本的に、次のようなコードが必要です。

$(function() {
  var $spy = $('.nav.nav-pills');
  $spy.scrollspy({offset: 20});
  $spy.bind("activate", function(e) {
    // do stuff here when a new section is in view
  });
});

これが実際の例です： http://jsfiddle.net/hajpoj/f2z6u/3/

一番下から始まるという事実を無視してください...それが無関係なバグなのか関連するバグなのかはわかりませんが、主なポイントは、アクティブ化イベントがどのように機能するかを確認できることです

于 2013-08-10T00:37:31.113 に答える