navigation up down

by lovromar

HTML

<header class="yapiskan">STICKY HEADER</header>
<div id="lipsum">

CSS

body{background-color:#34495e; padding-top:10px;height:1200px;}

#lipsum{width:690px; margin:45px auto; color:white;text-align:justify;font:300 14px 'Open Sans';}

.reklam-sticky{float:left; margin:0 10px 10px 0;}

.yapiskan{
  font:300 24px 'Open Sans';
  background-color:#e74c3c; 
  color:white; 
  padding:11px 5px; 
  text-align:center; 
  position: fixed; 
  left:0; 
  top:0; 
  width:100%; 
  transition: top .5s;
}

.gizle {
  top: -90px;
}
.sabit {
  top:0;
	z-index: 9998;
}

JavaScript

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