web-dev-qa-db-ja.com

例のようなScrollSpy bootstrap sidebarを作成するための最小コードは何ですか?

bootstrapページで左側のScrollSpyの例を見てきました。

http://Twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

しかし、彼らは同じスタイルと効果を得る方法のサンプルコードを持っていませんか?これを達成するために必要な最小限のコードは何ですか、私が見たすべてのJsFiddleの例にはスタイリングがないためです。

更新

スクロールバーはページレベルでのみ機能するため、プロジェクトでscrollspyの使用を停止しました。スクロールが発生するコンテナーにのみスクロールバーが表示される必要があります。

25
Zubair

これが役立つかどうかを確認します。 http://jsfiddle.net/panchroma/rWYQu/

  1. Bodyタグに<body data-spy="scroll" data-target="#side-nav">を追加します
    (フィドルオプションの左側の列を参照)

  2. この同じデータターゲットIDのdivでサイドナビゲーションバーをラップします:<div id="side-nav" >

  3. おそらく、クラスaffixをサイドナビゲーションに追加して、所定の位置に留まるようにします:<ul class="nav nav-pills affix">

  4. サイドナビゲーションの各リンクに一意のIDを追加します。例:<li><a href="#one">One</a></li>

  5. ページの本文で、サイドバーのリンクに一致するIDを持つセクションを追加します。例:<section id="one"> Section 1 </section>

それでおしまい!

編集

ただし、サイトでBootstrapの例のようにスタイル設定するにはどうすればよいですか?

bootstrapページに似たスタイリングが必要な場合のバリエーションを次に示します。
http://jsfiddle.net/panchroma/ExWDq/

組み込みのBootstapスタイリングをより活用するためにnavリストのクラスを変更し、メニューリンクにシェブロンを追加し、navリストのスタイリングとメディアクエリを追加したことがわかります。

41
David Taiaroa

Sidenav scrollspyの使用に関するいくつかの調査を行っているときに、 すべてをコーディングする の良いチュートリアルを見つけました。

すべてのソースは github にあります。

9
botheredbybees