Sticky header slides down on scroll up

by hannes

HTML

<header class="top">STICKY HEADER</header>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus ante augue, ultrices semper tellus eleifend eu. Integer eu arcu risus. Nam lobortis lectus aliquam lorem accumsan, nec blandit purus ultrices. Mauris consectetur ante vitae lacinia dapibus. Cras at eleifend ligula, ut ullamcorper ipsum. Vestibulum vestibulum mollis nisi consectetur elementum. Donec vel fermentum sapien. Etiam quis purus eu ante bibendum congue. Morbi pellentesque magna ac lacinia bibendum.
</p>
<p>
Duis vel faucibus purus. Nam interdum erat at bibendum tincidunt. Integer tempor hendrerit purus, sit amet fringilla felis imperdiet tempus. Nullam a sem eget velit mattis luctus at nec metus. Integer auctor viverra nulla, sit amet blandit nulla. Duis auctor est vitae turpis tincidunt, sit amet dictum purus cursus. Mauris venenatis lectus nec magna eleifend euismod.
</p>
<img src="http://www.adobewordpress.com/ads/300x250.jpg">
<p>
Morbi varius faucibus nulla ut pharetra. Vestibulum sed sapien turpis. Sed diam felis, ullamcorper vel augue id, porta porta nibh. Mauris interdum elit ac metus fermentum, eu porttitor purus venenatis. In nec metus vitae augue mattis porta in at erat. Suspendisse potenti. Phasellus accumsan porta massa, eu scelerisque erat lacinia ac. Etiam feugiat mollis nisl, nec dignissim mauris fermentum nec. Vivamus ullamcorper tortor nec purus egestas fermentum. Etiam et imperdiet sem. Vestibulum in risus massa.
</p>
<p>
Mauris eleifend elit id purus vulputate aliquam. Suspendisse semper elit id diam malesuada sagittis. Quisque non nunc tempor, convallis felis at, placerat elit. Quisque quis nulla dapibus, vulputate diam id, dapibus sapien. Vestibulum commodo arcu at erat imperdiet ornare. Nulla vestibulum dolor sed mauris varius interdum. Quisque convallis, felis eu pharetra elementum, nisl velit consectetur nunc, eu dapibus elit ante eleifend ligula. Mauris elementum id velit ut ornare. Suspendisse a...

CSS

body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}

#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}

img{float:left; margin:0 10px 10px 0;}


.top{
  font-size:24px; 
  padding:5px; 
  text-align:center; 
  position: fixed; 
  left:0; 
  top:0; 
  width:100%; 
  transition: top .5s;
}

.gizle {
  top: -120px;
}
.sabit {
   background-color:#e74c3c; 
  color:white; 
  top:0;
	z-index: 9999;
}

JavaScript

$(function(){	
    var cubuk_seviye = $(document).scrollTop();
    var header_yuksekligi = $('.top').outerHeight();

    $(window).scroll(function() {
        var kaydirma_cubugu = $(document).scrollTop();

        if (kaydirma_cubugu > header_yuksekligi){$('.top').addClass('gizle');} 
        else {$('.top').removeClass('gizle');}

        if (kaydirma_cubugu > cubuk_seviye){$('.top').removeClass('sabit');} 
        else {$('.top').addClass('sabit');}
        
        if (kaydirma_cubugu == 0) $('.top').removeClass('sabit');

        cubuk_seviye = $(document).scrollTop();	
     });
});