コンテンツ
コンテンツ
コンテンツ
コンテンツ
メニューや検索フォームは、コンテンツの途中にあることもある
コンテンツ
コンテンツ
コンテンツ
コンテンツ
<style>
.sticky-menu {
position:sticky;
height:100px;
top:-100px;
transition:.5s;
background:#fee;
}
</style>
<script>
$(function(){
var $sticky = $('.sticky-menu');
var height = 0 - $sticky.height();
//position:sticky が使えるときだけ使う
if ($sticky.css('position') == 'sticky') {
var lp = 0;
$(window).on('scroll', function(){
var cp = $(this).scrollTop();
if (lp < cp) {
//下へ → 上に引っ込むアニメーション
$sticky.css('top', height);
} else if (lp > cp) {
//上へ → 下に出てくるアニメーション
$sticky.css('top', 0);
}
lp = cp;
});
}
});
</script>
（前略） <div class="sticky-menu">menu1 | menu2 | menu3 | menu4 | menu5</div> （後略）
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ