Проблема выпадения из потока прилипающего меню?

Question

[HealSpirit]

https://dimanik94.github.io
Суть вопроса: в момент, когда скролл доходит до меню его позиционирование меняется со static на fixed, тем самым происходит выпадению меню из потока документа и нижестоящие элементы занимают освободившееся пространство. Но занимают они это место рывком, что выглядит некрасиво.
Как решить эту проблему? В момент, когда меню меняет позиционирование, нижестоящим элементам ставить margin или padding, равный высоте меню? Есть какие-то варианты?
К примеру на сайте SAMSUNG реализовано, такое же меню, но такого рывка нету, причем код, как я думаю не сильно отличается: https://www.samsung.com/ru/cooking-appliances/comp...

Answer 1

[Александр]

На сайте samsung высота блока .product-anchor-nav-nonprice-jsWrap, в который вложено меню, закостылено прямо в верстку страницы. Это неправильно, хотя и работает.
В вашем случае можно или обернуть .nav дополнительным тегом, при прокрутке динамически задавать высоту блока и добавлять класс для .nav, или использовать трансформацию, которая будет задавать смещение меню от начальной точки .nav до window.pageOffsetY.
Еще рекомендую добавить will-change для .nav.

Comments

[HealSpirit]

Александр,

или использовать трансформацию, которая будет задавать смещение меню от начальной точки .nav до window.pageOffsetY

т.е. вместо того, чтобы задавать меню фиксированное позиционирование нужно использовать смещение через transform?
я правильно понял ваши слова?
код переписал с такого:

var mainNav = document.querySelector('.main-nav');

function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var topPosition = offset(mainNav).top;
window.onscroll = function () {
	if (window.pageYOffset >= topPosition) {
		mainNav.classList.add('sticky');
	} else {
		mainNav.classList.remove('sticky');
	}
}

на такой:

var mainNav = document.querySelector('.main-nav');

function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var topPosition = offset(mainNav).top;
window.onscroll = function () {
	if (window.pageYOffset >= topPosition) {
		var currentPosition = window.pageYOffset - topPosition;
		mainNav.style.transform='translateY(' + currentPosition + 'px)';
	}
}

вроде работает, но не хватает z-index'a, т.к в некоторых местах видно что меню находится за слоем текущего положения. как это поправить? я знаю, что z-index применяется только в том случае, если позиционирование отличается от static, но здесь оно не меняется
как мне кажется, во время прокрутки появился верхний отступ у меню высотой около 1 пикселя. откуда он там взялся?
UPD: при быстром скролле на мобильном телефоне смещение не успевает за скроллом

[Александр]

HealSpirit, сразу задайте правильный z-index для .nav (без вариантов)
Придется таки использовать position: fixed :C

[HealSpirit]

Александр, да, с position: fixed и дополнительной оберткой гораздо лучше. И, если не трудно, оцените общую структуру верстки)

[Александр]

HealSpirit, разве в services не должно быть карусели?

[HealSpirit]

Александр, должна быть, и не только там, а еще и в team. Попробую owlcarousel 2 или slick подключить, ниразу такими вещами не занимался. В skills должен быть еще анимированный прогрес бар при скролле, а в портфолио - сортировка по типу картинок (здесь даже незнаю с чего начать). И, наконец, добавить плавный скролл к каждому разделу и кнопку скролла наверх. Я в целом спрашиваю, svg в html, сетка - имитация бутстрапа 4. Актуально все это?

[Александр]

HealSpirit, актуально всё, что работает в требуемых браузерах с минимальным количеством запросов

[HealSpirit]

Александр, я понял, спасибо за помощь, отмечаю решением.

[HealSpirit]

Александр, совсем не по теме, но может вы знаете как у слайдера в блоке services при нажатии на кнопки управления поменять скорость смены слайда на такую же как и при ручной смене. Там стоит smartSpeed: 700, но он вобще не влияет на смену слайда через кнопки управления.
Слайдер: Owl Carousel 2
Сайт: https://dimanik94.github.io