Bootstrap の Web サイト ( http://twitter.github.io/bootstrap/getting-started.html ) には、リンク付きのサイドバーがあります。私は自分のウェブサイトでそれを複製しましたが、Bootstrap サイトではスクロールすると所定の位置に固定されるため、常に表示されます。また、各メニュー項目が表示されているときにアクティブとしてマークします。
これを自分のサイトでも複製するにはどうすればよいですか?
Bootstrap の Web サイト ( http://twitter.github.io/bootstrap/getting-started.html ) には、リンク付きのサイドバーがあります。私は自分のウェブサイトでそれを複製しましたが、Bootstrap サイトではスクロールすると所定の位置に固定されるため、常に表示されます。また、各メニュー項目が表示されているときにアクティブとしてマークします。
これを自分のサイトでも複製するにはどうすればよいですか?
affix
ブートストラップから JavaScript を使用します。
data-spy="affix"
貼り付けたい要素に属性を追加することで、これを有効にすることができます。
http://twitter.github.io/bootstrap/javascript.html#afixで完全な手順を参照してください。
これには、完全なブートストラップ ライブラリまたは含まれている bootstrap-affix.js スクリプト ファイルのいずれかが必要です。
ナビゲーションが正しく更新されるようにするには、ページのマークアップを更新し、Scroll Spy プラグイン ( http://twitter.github.io/bootstrap/javascript.html#scrollspy ) を使用する必要があります。
サイドバーの上部がウィンドウの上端にちょうど接触するポイントで、サイドバー div の「位置」属性を相対から絶対に変更する必要があります。JavaScript イベントを使用して、スクロール バーを監視できます。