Как сделать прилипающее при скролле меню при подобном макете?

Question

[Kilila]

День добрый. Хотелось бы узнатоков уточнить про макет на картинке выше. В подобном макете я хотел первую картинку на фон боди вешать + еще указать цвет бэкграунда (как подстраховку), после хедера далее уже идут section's у которых начиная со второго (первый, который попадает в картинку - прозрачный), по сути, указаны в бэкграундах изображения. Своё решение объясню - если делать делать начиная с первой секции картинки в бэкграундах, тогда придется все секции сдвигать вверх и получится дыра между последним и футером (ибо если не сдвигать, то выше линии навигации будет бэкграунд колор темный, который у боди указан по умолчанию). Я что-то упускаю (кстати, у хедера position: sticky) и лучше сделать по другому? Меня смущает некоторая "костыльность" и, как бы это сказать, "несемантичность", что первая картинка, как бы, вне секции, хотя принадлежать "по идее" должна первому блоку, но другого пути не вижу (если только не переделывать хедер с навигацией, чтобы он был в абсолютном позиционировании, а свойство sticky "эмулировать" с помощью JS, опять же, подскажите как, ибо в гуглах я видел примеры когда выше меню обязательно что-то было, а не такой пример как у меня - когда, по сути, меню, сверху первой секции и в процессе прокрутки должно прилипать к верхней границе страницы). Заранее благодарен.

Answer 1

[DivineDraft]

Есть скрипты, который просчитывают высоту и после Npx добавляют класс к примеру menu-fixed, если я правильно понял из выше изложенного.

jQuery(function($) {
 $(window).scroll(function(){
 if($(this).scrollTop()>185){
 $('div.header-menu').addClass('fixed-on');
 }
 else if ($(this).scrollTop()<185){
 $('div.header-menu').removeClass('fixed-on');
 }
 });
 });

Добавляете transition для меню и если хотите эффекты для перехода, а к fixed-one {position:fixed;top:0;}

Comments

[Kilila]

Благодарю за ответ. А добавление класса сработает корректно? То есть, по идее, изначально (если делать корректно), то блок меню спозиционирован абсолютно (тогда автоматически все секции съедут вверх корректно, т.е. вместо добавления картинки первой секции в боди, добавим её секции, т.к. все они будут без дополнительных усилий выстроены правильно), а z-index поставлен максимальный. Далее, при скролле он должен прилепляться к верху, когда достигает верха страницы, но если ему вместо абсолютного позиционирования поставится скриптом фиксированное, не сместит ли это секции из-за которых, собственно, и весь сыр-бор?

[DivineDraft]

У вас много текста, мало примеров, не понятно о чем идет речь - сложно понимать, чего вы хотите. Если верстка правильная - сайт даже не двинется.

Пробуйте, тестируйте и все получится.

[Kilila]

DivineDraft, хорошо, благодарю, попробую и отпишусь.