Pascha Опубликовано 13 апреля, 2022 Поделиться Опубликовано 13 апреля, 2022 На самом деле не так страшен черт как его малюют. Приступим: Для начала обернем блок ( я от балды просто обернул код вывода меню навигации) , который надо зафиксировать при прокрутке в <div id="scroll-menu" class="default"> ... </div> Далее пишем простой ""жабаскрипт" смены класса данного блока при определенном расстоянии <script> $(document).ready(function(){ var $menu = $("#scroll-menu"); $(window).scroll(function(){ if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){ $menu.removeClass("default").addClass("fixed"); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.removeClass("fixed").addClass("default"); } });//scroll }); </script> *тут 100 - это расстояние прокрутки вверх или вниз на 100px (шапки бывают разной высоты, поэтому полной универсальности не ждите... пропишите сколько нужно) вставляем этот скрипт в шапку перед </head> Ну и стиль для фиксированного блока: #scroll-menu.fixed{ position: fixed; top: 0; z-index:99; margin:auto; width: 100% } все, господа.... просто? 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Pascha Опубликовано 13 апреля, 2022 Автор Поделиться Опубликовано 13 апреля, 2022 из новинок: приблуда фиксации блока при скролле средствами css position: sticky; (дочерний блок фиксируется в пределах родительского блока ) пример 1 прикрепить элемент к верхнему краю ./КЛАСС ФИКСИРУЕМОГО БЛОКА/) { position: sticky; position: -webkit-sticky;/* Safari */ top: 0; } пример 2 прикрепить элемент к нижнему краю ./КЛАСС ФИКСИРУЕМОГО БЛОКА/) { position: sticky; position: -webkit-sticky;/* Safari */ bottom: 0; } 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.