Всем привет!!!
Как-то по работе при разработке сайта на WordPress мне понадобилось сделать «липкое» меню (sticky menu). В одной из статей я описывал способ как создать sticky menu с помощью CSS и JQuery.
WordPress также предлагает создать такое меню средствами плагинов. Я воспользовался данной возможностью и установил плагин Sticky Menu (or Anything!) on Scroll. Данный плагин действительно помогает сделать sticky menu, однако у него есть одна особенность: данный плагин может работать только с одним элементом. Мне же необходимо было сделать два «липких» меню: обычное десктопное и мобильное.
Решение
Для создания обычного (десктопного) stiky memu я использовал CSS:
.site-header
{
position: sticky;
top: 0;
z-index: 99999;
}
Для создания мобильного stiky memu я использовал CSS:
.mobile-header
{
position: sticky;
top: 0;
z-index: 99999;
}
где:
- .site-header, .mobile-header — это классы моего десктопного и мобильного меню соответственно;
- position: sticky — задает «липкую» позицию;
- top: 0 — элемент будет становиться плавающим, как только область видимости достигнет определённой позиции;
- z-index: 99999 — меню поверх всех элементов.
Примечание: Пару слов про кроссбраузерную поддержку. «Липкое» позиционирование поддерживается всеми основными современными браузерами. Исключение: старый-добрый IE. Для Safari потребуется префикс -webkit
position: -webkit-sticky; /* Safari */
Это все. Удачи!!!