カプセル・メニューにおけるスクロールスパイ
ページ内リンク用カプセル・メニューにおけるスクロールスパイ使用方法。
- カプセル・メニューにスクロール連動させたい要素に対し、スタイルシートで
overflow: scroll;
を指定する。 - カプセル・メニューにスクロール連動させたい要素の
data-spy
属性に、scroll
を指定する。 - カプセル・メニューにスクロール連動させたい要素の
data-target
属性に、スクロールに連動させたいカプセル・メニューのid
属性値やclass
属性値を指定する。
サンプル
ソースコード
HTML
<body role="document" data-spy="scroll" data-target="#sampleScrollSpy" data-offset="113"> <header class="container-fluid"> <div class="container"> <div id="sampleHeader" class="container-fluid"> <h1>サンプル</h1> <div id="sampleScrollSpy"> <ul class="nav nav-pills"> <li><a class="linkInThePage" href="#sampleA">ページ内リンクA</a></li> <li><a class="linkInThePage" href="#sampleB">ページ内リンクB</a></li> <li><a class="linkInThePage" href="#sampleC">ページ内リンクC</a></li> </ul> </div> </div> </div> </header> <div class="container-fluid"> <div class="container"> <div id="sampleMainContents"> <p><a href="../javascript/scrollspy-pills.html" target="_blank">カプセル・メニューにおけるスクロールスパイ</a>のサンプル。</p> <h2 id="sampleA">A</h2> <ol> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ol> <h2 id="sampleB">B</h2> <ol> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ol> <h2 id="sampleC">C</h2> <ol> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ol> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="http://foo.tld/jquery/animatescroll.js-master/animatescroll.noeasing.js"></script> <script> $( function() { $('.linkInThePage').click( function () { var hrefValue = $(this).attr( 'href' ); $(hrefValue).animatescroll({padding:112}); } ); } ); </script> </body>
CSS
body { padding-top: 112px; } #sampleHeader { position: fixed; top: 0px; height: 112px; background-color: #ddd; } #sampleMainContents { padding: 2em; border-left: 1px solid #ddd; }