ページの下方向にスクロールしていくと画面上部に固定化されるヘッダー(もしくはナビ等)のこと。
固定化したい要素に”position:sticky;”を設定すればそれで実現できるみたいだが、自作してみた。
ソースコード
HTML
ダミーテキスト
ダミーテキストは以下から取得。
すぐ使えるダミーテキスト – 日本語 Lorem ipsum
CSS
header {
width: 100%;
background-color: #eee;
}
header .inner {
height: 300px;
}
header.sticky {
/* navをfixedにするとnavの高さが消えてレイアウトが乱れるので
paddingでnavと同じ高さを確保する */
padding-bottom: 50px; /* navの高さと同じ */
}
nav {
width: 100%;
}
nav.sticky {
position: fixed;
top: 0;
}
.menu-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
background-color: #aaa;
}
.menu-list-item {
width: 100px;
height: 50px;
line-height: 50px;
}
.content {
width: 100%;
height: 3000px;
background-color: #ccc;
}
jQuery
$(function(){
var $window = $(window);
var $header = $('header');
var $nav = $header.find('nav');
var headerHeight = $header.height(); // headerの高さ
var navHeight = $nav.height(); // navの高さ
$window.scroll(function() {
// 現在の位置
var currentPos = $window.scrollTop();
// 現在の位置がnavまで到達したらnavを固定
if(currentPos >= headerHeight - navHeight) {
$header.addClass('sticky');
$nav.addClass('sticky');
} else {
$header.removeClass('sticky');
$nav.removeClass('sticky');
}
});
});