Ответ 1
Увидев, что вы просите о помощи в другом ответе, я попытаюсь объяснить вам более четко.
Проблема
Ваша проблема заключается в том, когда вы добавляете position:fixed на панели навигации, она удаляет ее со своего места и вставляет ее вверху страницы. Вот почему остальная часть вашего контента вскакивает - потому что панель навигации не там, где она была.
Как исправить
Вы можете обойти это, обернув свой навигационный элемент новым вызовом div let, который он представляет собой nav-wrapper, и установите его высоту так же, как ваш навигационный элемент. Они известны как элементы-заполнители. Эта новая оболочка и ваша первоначальная панель навигации всегда должны быть одинаковой высоты для того, чтобы "прыжок" исчез.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Теперь, когда вы устанавливаете навигационную панель на fixed и она исчезает вверху, новая оболочка, созданная с одинаковой высотой, сохраняет содержимое страницы одинаковой. Когда фиксированный класс удален, он снова возвращается в оболочку, не отталкивая содержимое.
Предложение
Из того, что я вижу на вашем сайте, будет большой пробел, когда панель навигации была до тех пор, пока новая фиксированная навигация не достигнет этой точки и не закроет ее. Что вам нужно, это немного jQuery, чтобы выяснить, где сделать навигацию фиксированной и где ее скрыть. Я объясню:
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
Возможно, вы захотите добавить в этот пример дополнительные функции, так как это очень, очень просто. Вероятно, вы захотите пересчитать смещения при изменении размера окна в качестве одного дополнения.
Демо-версия
Это небольшая демонстрация, которая могла бы вам помочь - мне было скучно и было полезно :)