Fixed положение заголовка на свитке - Если Else не работает

Question

Вот ручка ...

http://codepen.io/jareko999/pen/bZXbWP

«тогда» часть JQuery работает и добавляет .fixed класс к #header, когда он равен до или ниже 0, но он не удаляет его, когда headerTop находится выше 0, «else». Я не могу понять, что здесь происходит. JS newb здесь, я хотел бы понять, как заставить это работать. Благодарю.

HTML

<div class="content"> 
    <div id="header"></div> 
</div> 

CSS

body { 
    overflow-x: hidden; 
    margin: 0; 
} 

#header { 
    width: 100%; 
    height: 80px; 
    background: blue; 
    z-index: 1; 
} 

.content { 
    position: absolute; 
    top: calc(100% - 80px); 
    width: 100%; 
    height: 200vh; 
    background: linear-gradient(to bottom, red, yellow); 
} 

.fixed { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background: blue; 
} 

JQuery

$(window).scroll(function() { 
    var top = $('#header').offset().top; 
    var headerTop = (top - $(window).scrollTop()); 

    if (headerTop <= 0) { 
     $('#header').addClass('fixed'); 
    } else { 
     $('#header').removeClass('fixed'); 
    } 

}); 

Answer 1

мне нужно, чтобы получить родительские дивы смещение(). Верх, а не собственно сам заголовок. Вот последняя функция прокрутки для липкого заголовка на основе верхней позиции родительских элементов.

http://codepen.io/jareko999/pen/bZXbWP

$(window).scroll(function() { 
    var top = $('.content').offset().top; 
    var headerTop = (top - $(window).scrollTop()); 

    $('#header').toggleClass('fixed', headerTop <= 0); 
    console.log(headerTop); 
});