Как остановить header перед каким-либо блоком?

Question

[De Slow]

Есть header (Fixed, top:0), в котором навигация: "Портфолио\Обо мне\Главная\Бла-бла"
При нажатии на кнопку, он доходит до нужного блока, и перекрывает его, как сделать так, что бы он вставал прямо перед ним? Нужен JS? Или можно справится Css?

Comments

[Владислав Бойченко]

Покажите скрипт, благодаря которому оно скроллит к анкору.

[De Slow]

Владислав Бойченко: просто через Id, у кнопки в навигации прописан айди блока к которому нужно идти. #about вот так

[Владислав Бойченко]

Lesha Weal: так оно не скроллит плавно, а просто перебрасывает?

[De Slow]

Владислав Бойченко: да, верно

Answer 1

[Владислав Бойченко]

$(document).on('click', 'a', function(event){ //определяете ссылки
    event.preventDefault(); //отменяете стандартное действие
    $('html, body').animate({ 
        scrollTop: $( $.attr(this, 'href') ).offset().top -100 // -100 это сколь px не дотягивать. То есть по сути высота вашего хедера
    }, 500); // время прокрутки
});

Comments

[De Slow]

<script type="text/javascript">
$(document).ready(function(){
	$(".navbar").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);
	});
});
</script>

Как к такому коду прикрутить "не дотягивать", вот такой скрипт есть в коде

[De Slow]

CСпасибо разобрлся, просто добавил -расстояние