Как зафиксировать скролинг ниже хедера?

Question

[goldwizard13]

<div id="menu" class="nav-container">
					<div class="nav">
						<ul>
							<li><a href="#HOME">HOME</a> </li>
							<li><a href="#ABOUT">ABOUT </a> </li>
							<li><a href="#CONTACT">CONTACT </a> </li>
						</ul>
						<div class="clear"></div> 
					</div>
				</div>
<section id="HOME" class="game-top">
	</section>
 и тд..

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		//отменяем стандартную обработку нажатия по ссылке
		event.preventDefault();

		//забираем идентификатор бока с атрибута href
		var id  = $(this).attr('href'),

		//узнаем высоту от начала страницы до блока на который ссылается якорь
			top = $(id).offset().top;
		
		//анимируем переход на расстояние - top за 1500 мс
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

При нажатии на ссылку происходит скролинг к нужному id, но "подтягивает" страницу к самому вверху страницы и часть прячется под хедер, как сделать чтоб дужная секция "прилипала" к низу хедера?

Answer 1

[goldwizard13]

top = $(id).offset().top-100;
???