タイトル１
サブタイトル１－１
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
サブタイトル１－２
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
タイトル２
サブタイトル２－１
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
サブタイトル２－２
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
タイトル３
サブタイトル３－１
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
サブタイトル３－２
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
タイトル４
サブタイトル４－１
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
サブタイトル４－２
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
タイトル５
サブタイトル５－１
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
サブタイトル５－２
XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
使い方
jQueryでメニューを表示したいエリアを指定してstickyNavigatorを呼び出すと見出しに利用している h2、h3 タグがメニューに表示されます。メニューに表示されたリンクをクリックすると該当箇所までページ内スクロールして表示されます。※ メニューを表示するエリアの先祖要素に override 要素が指定されている場合はstickyが効かないのでご注意ください。
Javascript
<script src="https://demo.isystk.com/jquery-stickyNavigator/js/jquery-stickyNavigator.js"></script>
<script type="text/javascript">
$(function() {
$('<メニューを表示したいエリアのセレクタ>').stickyNavigator({wrapselector: '<記事内容が記載されているエリアのセレクタ>'});
});
</script>
Css
#sticky-navigator {
background:#fff;
line-height: 1.6;
color: #555;
font-size: 0.9em;
box-shadow:0px 0px 5px;
border:1px solid #f4f4f4;
margin-bottom: 48px;
padding: 10px
}
#sticky-navigator ul {
padding: 0px;
}
#sticky-navigator ul li:first-child {
border-top: none;
padding-top: 8px;
}
#sticky-navigator ul li {
list-style: none;
line-height: 1.4;
}
#sticky-navigator ul li.nav-h2 {
padding-top: 6px;
padding-bottom: 6px;
}
#sticky-navigator ul li.nav-h3 {
margin-left: 10px;
}
#sticky-navigator ul li.current {
background-color: #dadde1;
}
#sticky-navigator {
position: -webkit-sticky;
position: sticky;
top: 5px;
}