Как избавиться от резкого скачка контента, при фиксировании меню при скролле?

Question

[boga-net]

Всем привет. Меню при скролле выезжает сверху и фиксируется. Я осуществляю это добавлением менюшке класса, у которого задаются position: fixed. Но из-за того, что меню выходит из общего потока, на его месте образуется пустота (высотой в это меню) и таким образом весь последующий контент резко подскакивает вверх, заполняя пустое пространство общего потока. Как грамотно от этого избавиться ?

https://codepen.io/Span4ev/pen/jKoNqw - немного поскроллить

Конечно, можно продублировать меню и показывать второе при скролле, но этот вариант мне не нравится, т.к. при изменении меню, надо будет менять сразу два.
Ну и совсем по-простому - сделать какой-то элемент, высотой в меню и шириной 100% и во время скролла "показывать" пустой элемент, чтобы он заполнил пустое пространство, а когда не нужно - скрывать ? Или же нужно что-то изменить в стилях и скрипте ?
Сделать плавность поднятия основного контента невозможно, потому что тут нечего анимировать

А вообще, какой подход является приемлемым и встречающимся на практике ? Пустой элемент ?

И вопрос к профи: Для мобильного меню вы переделывается общие стили или тоже дублируете основное меню, и прописываете стили отдельно для мобильных экранов ?

И нормально ли, ради красоты делать 3 меню: основное, мобильное и показывающееся при скролле ? Насколько это тупо и непрофессионально ? И тот же вопрос про 2 меню: мобильное и основное

.fixed-menu-start
			width: 100%
			position: fixed
			top: -200px
			left: 0
			background: $white
			z-index: 100
			box-shadow: 0 3px 10px rgba($darkGray, .1)
			transition: top $trans

			&.fixed-menu-end
				top: 0

// Меню
		$(window).on('scroll', function() {

			let scr = $(this).scrollTop();

			if (scr >= 200) {
				$('.header-menu-bg').addClass('fixed-menu-start');
			}
			if (scr < 200) {
				$('.header-menu-bg').removeClass('fixed-menu-start');
			}

			if (scr >= 300) {
				$('.header-menu-bg').addClass('fixed-menu-end');
			}
			if (scr < 300) {
				$('.header-menu-bg').removeClass('fixed-menu-end');
			}

		});

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

Спасибо

Answer 1

[Максим]

если добавить для body в тот момент когда меню фиксируется отступ равный высоте меню - тогда скачка не будет ...
и кстати я не увидел скачка в 4х браузерах

Comments

[boga-net]

Наверное потому, что вы быстро скроллили. Попробуйте медленно, не спеша ) Увидите, что картинка подскакивает вверх, заполняя пустое пространство. Здесь не в браузере дело.
Отступ для бади будет более непредсказуем, чем пустой контент в том же потоке, где и меню.
Вы как поступаете ?

[Максим]

boga-net, вы добавьте padding-top для body - и потом отпишитесь

[boga-net]

Максим Ленский, Да я итак понимаю, что это поможет ) Спасибо. Просто хотелось услышать мнение людей о том, каким образом они справляются с это проблемой. Вдруг есть разные варинты и один какой-то самый грамотный

[Максим]

boga-net, обычно так и справляются с этой проблемой

[boga-net]

Максим Ленский, Ясно, спасибо

Answer 2

[Виталий]

Я больше склоняюсь к варианту добавления padding-top к body (о котором уже сказал Максим Ленский), но как вариант можете сделать clone() и уже фиксировать его, а потом удалять. Это больше подойдет в том случаи если вам нужно не только зафиксировать, но как-то интересно показать или показать в несколько другом виде.

Comments

[boga-net]

clone() - хорошее решение. Да, раз двое советуют отступ у бади, то чисто статистически это уже более практичное решение проблемы ) спасибо

Answer 3

[sadieff]

Я делаю так:

<div class="menu-wrap">
    <div class="menu">
    <div>
</div>

Само меню menu делаешь фиксированным, а обертке menu-wrap задаешь высоту.