facebook twitter hatena line google mixi email

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
  • サイドメニューが移動が、画面スクロール時に画面上部に移動せずに画面下の同じ場所で固定されてしまう。

結局不具合があり使えなかったので代用ライブラリを使いました

http://hm-solution.jp/web/post3105.html