用途
新着
履歴
分類

jQuery スクロールでヘッダー表示

jQuery スクロールでヘッダー表示
jQueryの応用で一定のピクセル数スクロールするとヘッダーが表示されるサンプルです。

以下のサンプルでは、70px以上スクロールすると、ヘッダーの要素がスライドして覆いかぶさります。

ファーストビューでは必要ないが、ページ下部になると必要性が高い要素を表示する時に重宝します。

$(document).ready(function(){
	fixed_menu = 0;
	$(window).scroll(function(){
		if( $(this).scrollTop() > 70 ){
			if(fixed_menu==0){
				$('#headerwrap_fixed').slideDown(400);
				fixed_menu=1;
			}
		} else {
			if(fixed_menu){
				$('#headerwrap_fixed').slideUp(200);
				fixed_menu=0;
			}
		}
	});
});

以下のリンク先にサンプルがあります。

公開 2019-08-04 16:09:24
更新 2020-01-26 23:00:24
このページの二次元コード
jQuery スクロールでヘッダー表示

人気のサンプル

search -  category -  about
© 2024 kipure
Top