ミギムキ

[jQuery] ページスクロールしたらナビゲーションメニューを固定表示しつつ小さくしたい

サンプルコード

jQuery

jQuery(function($) { $(window).scroll(function() { var headerHeight = $('.g_navi').innerHeight(); var scrollPos = $(this).scrollTop(); if( scrollPos > headerHeight ) { $('.g_navi').addClass('js_active'); } else { $('.g_navi').removeClass('js_active'); } }); });
スポンサー広告

CSS

.g_navi.js_active { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 9999; height: 100px; }

仕組み、解説、補足など

スポンサー広告