途中からfixedしてくるnavigation
ユーザビリティ的には好ましくないがクライアントから求められるのがこのスクロールしてる途中からついてくるナビゲーション。
本当に邪魔。
ついてこられると可視領域が減るので物凄く嫌なんですよ自分的には。
取り敢えず仕事で使うので記録しておきます。
$(function(){
var navPos = $( '#nav' ).offset().top; //#navの位置を取得
var navHeight = $( '#nav' ).outerHeight(); //#navのpadding・border・marginを含む高さを取得
$( window ).on( 'scroll', function() { //スクロールした場合
if ( $( this ).scrollTop() > navPos ) { //それ(this)→スクロール量が#navの位置を超えた場合に
$( 'body' ).css( 'padding-top', navHeight ); //bodyにnavPhosと同じ量のpadding-topを付与する
$( '#nav' ).addClass( 'fixed' ); //#navにclass fixedを付与
} else { //でなければ
$( 'body' ).css( 'padding-top', 0 ); //bodyにpadding-top:0 を付与
$( '#nav' ).removeClass( 'fixed' ); //#navのclass fixedを削除
}
});
See the Pen
fixed navigation by lolo_uturogi (@lolo_uturogi)
on CodePen.