Header disappear on scrolling

by Sasá Rafalsky

HTML

<div class="header">
    HEADER
</div>

CSS

body{
    background: #999;
    height: 1000px;
}
.header{
    width: 100%;
    height: 200px;
    background: #09f;
    text-align: center;
    font-size: 32px;
    line-height: 200px;
    color: #fff;
    
}

JavaScript

var header = $('.header');
 var range = 200;
 $(window).on('scroll', function () {
     var st = $(this).scrollTop();
     header.each(function () {
         var offset = $(this).offset().top;
         var height = $(this).outerHeight();
         offset = offset + height / 1.5;
         $(this).css({
             'opacity': 1 - (st - offset + range) / range
         });
     });
 });