Дуже часто на сайтах з великою кількістю контенту відвідувач губиться на сторінці і, щоб знайти навігаційне меню, доводиться перегортати на самий верх сторінки. Технології не стоять на місці, екрани моніторів та їх дозволу стають більшими, тому зараз на сайті вже не шкода виділити зверху 40 пікселів під фіксоване меню при прокручуванні сторінки сайту. Відвідувач зможе завжди бачити в якому розділі знаходиться, а також мати швидкий доступ до навігаційного меню. Зрештою, це збільшує глибину перегляду сайту:)
Якою є суть фіксованого навігаційного меню на сайті? Спочатку наше меню знаходиться на звичному йому місці, десь у шапці, в моєму випадку на відстані 140px від верхнього краю. Як тільки відвідувач прокручує сторінку на ці самі 140px внизу, меню фіксується в самому верху вікна і там залишається весь час, поки скролл не буде повернуто знову у верхнє положення.
Фіксоване меню при прокручуванні сторінки це, по суті, панель управління, яка завжди з тобою. Меню у нас буде просте.
Від теорії до практики. Все досить просто і мінімалістично, більшість коли віддається стилям, які ви вже самі налаштовуєте під себе. Я зробила фіксоване меню як на малюнку, при скролі колір меню стає трохи прозорим, щоб воно не виглядало важким і під ним було видно контент.
Наші стилі. У мене меню завширшки 1180px, розташоване по центру. Шапка висотою 180px, меню з прокручуванням до нього входить і займає 40px. Значить відстань від верху 140px. Запам'ятаємо це число)
#header ( height: 180px; ) #navigation( background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px position: relative; top: 140px; ) #navigation.fixed( position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; #fff; text-decoration: none; font-family: Verdana; ) #menu>li a:hover( color: #656565;
І ось ті кілька рядків коду, які творять чаклунство) Ми задаємо умови прокручування сторінки, вище 140px або нижче. Залежно від цього надається клас fixed для нашого навігаційного меню. А з цим класом, як зазначено вище, ми робимо меню фіксованим і закріпленим зверху.
JQuery(function($) ( $(window).scroll(function()) if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()
Зверніть увагу, що й у коді, укладеному в echo " " , будуть зустрічатися одиночні лапки, їх потрібно буде екранувати , тобто. поставити перед кожною з них зворотний сліш (\) без дужок, звичайно.
Загалом вийшло, як вийшло. Як це конкретно прикрутити до вашої теми, вам доведеться вирішувати самим - коли є час, то це навіть прикольно "зламати голову". Дякую.
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
WebPoint PRO - адаптивна тема для WordPress з широким функціоналом та грамотною технічною пошуковою оптимізацією 
Share42 - скрипт для додавання на сайт кнопок соціальних мереж та закладок (є варіант плаваючої панелі)
Які зустрічаються дедалі частіше на сторінках блогів та інших ресурсів. Використання таких навігаційних панелей цілком виправдане. Однією з основних причин активного використання цих jQuery плагінів є те, що меню завжди є під рукою відвідувача, навіть якщо він знаходиться внизу сторінки. До того ж, фіксоване меню займає трохи місця і не відволікає уваги від основного контенту. Якщо говорити загалом – фіксоване меню покращує юзабіліті сайту.
Я зібрав колекцію з найкращих, на мою думку, безкоштовних jQuery плагінів для реалізації фіксованого меню . Намагався, щоб кожен із плагінів був чимось унікальним, щоб будь-який плагін із добірки можна було застосувати саме у вашому проекті. У колекції можна знайти як прості, так і складніші плагіни з анімацією тощо.
Якщо ж вам потрібно зовсім просте фіксоване меню, щось на зразок того, як у нас реалізована липка панель із соціальними кнопками, можна обійтися і без jQuery плагінів, адже навантажувати сторінку скриптами - це не дуже добре, але про це ми поговоримо в наступних статтях . Підписуйтесь на наш канал або на сторінки в , щоб не пропустити цікаві матеріали.
Отже. До вашої уваги 6 jQuery плагінів для створення фіксованого меню.
