Проблема с динамическим поплавком

Question

Я хочу, чтобы меню было зафиксировано сверху, когда окно прокручивается более чем на 160 пикселей, но если содержимое тела слишком короткое, оно станет бесконечным циклом, потому что если я прокручу вниз более 160 пикселей, меню будет фиксироваться, что означает, что высота прокрутки станет меньше 160 пикселей, поэтому скрипт сделает меню относительно назад, как это решить.

Demo

HTML

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

JavaScript

$(window).on('scroll', function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll > 160) { 
     $('#header').css('position', 'fixed'); 
    } else { 
     $('#header').css('position', 'relative'); 
    } 
}); 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    width: 100%; 
    height: 60px; 
    background: black; 
    color: yellow; 
    position: relative; 
    padding: 6px; 
} 
#content { 
    width: 100%; 
    height: 780px; 
    background: gray; 
} 

Answer 1

при добавлении позиции, прикрепленной к меню, добавить также paddin-топ для контента (обивка-верхнее значение равна высота заголовка + сверху заголовок и нижние отступы)

JS:

$(window).on('scroll', function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll > 160) { 
     $('#content').css('padding-top', '72px'); 
     $('#header').css('position', 'fixed'); 
    } else { 
     $('#content').css('padding-top', '0'); 
     $('#header').css('position', 'relative'); 
    } 
}); 

fiddle

Answer 2

вам не нужен javascript здесь ... так что удалите все js ... и отредактируйте свои css:

#header { 
    width: 100%; 
    height: 60px; 
    background: black; 
    color: yellow; 
    position: fixed; /* make menu header always fixed */ 
    padding: 6px; 
    top:0px; 
} 

#content { 
    width: 100%; 
    height: 780px; 
    margin-top:72px; /* margin top 72px because of header height is 60px + pedding 6px*2 */ 
    background: gray; 
}