jQuery

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

January 1, 2016

【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();   
     });
});