Html/bootstrap/bootstrap3/固定サイドメニュー
提供: 初心者エンジニアの簡易メモ
ライブラリ名
affixを使っていく
サンプル
<html> <head> <link href="/twitter_bootstrap3/css/bootstrap.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/twitter_bootstrap3/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ $('#sidemenu').affix({ offset: { top: function () { return (this.top = $('header').outerHeight(true)) }, bottom: function () { return (this.bottom = $('footer').outerHeight(true)) } } }); }); </script> </head> <body> <header> header<br /> header<br /> header<br /> header<br /> header<br /> </header> <div class="container"> <div class="row"> <div class="col-md-10 column"> <p> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> メインコンテンツ<br /> </p> </div> <div class="col-md-2 column"> <div id="sidemenu" class="nav nav-stacked"> メニュー<br /> メニュー<br /> </div> </div> </div> </div> <footer> footer<br /> footer<br /> </footer> </body> </html>
不具合あり
- 一度下までおりて、再度upすると、サイドメニューが上部に戻る。（修正版affix:https://github.com/twbs/bootstrap/blob/master/js/affix.js
- サイドメニューが移動が、画面スクロール時に画面上部に移動せずに画面下の同じ場所で固定されてしまう。
