【jQuery】スクロールアップ時にヘッダー固定されたメニューを表示。Sticky Header

【jQuery】スクロールするとヘッダーに固定されるstickyナビ系jQueryプラグイン10選でご紹介したSticky Header。
Sticky Headerはスクロールアップ時にヘッダー固定されたメニューを表示してくれるプラグイン。

CSS

.yapiskan{
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
}
.gizle {
top: -89px;
}
.sabit {
top:0;
z-index: 9999;
}

jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

オプション

$(function(){   
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.yapiskan').outerHeight();
$(window).scroll(function() {
var kaydirma_cubugu = $(document).scrollTop();
if (kaydirma_cubugu > header_yuksekligi){$('.yapiskan').addClass('gizle');}
else {$('.yapiskan').removeClass('gizle');}
if (kaydirma_cubugu > cubuk_seviye){$('.yapiskan').removeClass('sabit');}
else {$('.yapiskan').addClass('sabit');}               
cubuk_seviye = $(document).scrollTop();   
});
});
 

【jQuery】スクロールアップ時にヘッダー固定されたメニューを表示。Sticky Header

  • LATEST
  • RELATED
  • POPULAR