@Kilila

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

5a92b88ccec5a350362884.jpeg
День добрый. Хотелось бы узнатоков уточнить про макет на картинке выше. В подобном макете я хотел первую картинку на фон боди вешать + еще указать цвет бэкграунда (как подстраховку), после хедера далее уже идут section's у которых начиная со второго (первый, который попадает в картинку - прозрачный), по сути, указаны в бэкграундах изображения. Своё решение объясню - если делать делать начиная с первой секции картинки в бэкграундах, тогда придется все секции сдвигать вверх и получится дыра между последним и футером (ибо если не сдвигать, то выше линии навигации будет бэкграунд колор темный, который у боди указан по умолчанию). Я что-то упускаю (кстати, у хедера position: sticky) и лучше сделать по другому? Меня смущает некоторая "костыльность" и, как бы это сказать, "несемантичность", что первая картинка, как бы, вне секции, хотя принадлежать "по идее" должна первому блоку, но другого пути не вижу (если только не переделывать хедер с навигацией, чтобы он был в абсолютном позиционировании, а свойство sticky "эмулировать" с помощью JS, опять же, подскажите как, ибо в гуглах я видел примеры когда выше меню обязательно что-то было, а не такой пример как у меня - когда, по сути, меню, сверху первой секции и в процессе прокрутки должно прилипать к верхней границе страницы). Заранее благодарен.
  • Вопрос задан
  • 166 просмотров
Решения вопроса 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;}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
20 авг. 2018, в 21:21
30000 руб./за проект
20 авг. 2018, в 20:46
5000 руб./за проект
20 авг. 2018, в 20:38
700 руб./в час