Фіксуємо меню 2 кращих підходу
Сьогодні ми фіксуємо меню при прокручуванні сторінки, розглянемо кращий варіант реалізації.
Всіх бажаючих купити ОСАГО і діагностичну карту запрошуємо відвідати сайт osagomarket.ru, на якому можна швидко і, головне, зручно придбати страховку для автомобіля.
Як ми фіксуємо меню?
Є 2 способи фіксувати меню:
- Фіксувати меню тільки якщо сторінка прокрутилася досить вниз
- Фіксувати меню постійно
Фіксуємо меню при прокручуванні сторінки
Для цього способу потрібно JS і CSS. Спочатку нам потрібно визначити наскільки сильно сторінка прокрутилася вниз, а потім, якщо це значення більше певного (наприклад більше розміру екрана) зафіксуємо меню. Розглянемо на прикладі:
Тобто при прокручуванні сторінки ми перевіряємо «більше чи величина прокрутки сторінки, ніж висота вікна», і якщо більше - додаємо клас fixed до нашого меню (і вказуємо висоту і ширину, тому, що при використанні position: fixed губляться розміри блоку), в Інакше - видаляємо цей клас.
Далі в справу вступає CSS:
Те, тобто за наявності такого класу об'єкт стане фіксованим.
Готово. Меню буде фіксуватися тільки тоді, коли користувач прокрутить сторінку більше, ніж на розмір екрану. Звичайно можна зробити фіксацію меню після того, як користувач прокрутить сторінку на величину самого меню, або на якийсь зарані заданий значення.
Фіксуємо меню завжди (другий варіант фіксації)
Для цього способу нам просто знадобитися CSS. Ми назавжди зафіксуємо меню, і при бажанні зробимо верхній відступ у body, щоб при нульовій прокручуванні меню не наїжджало на решті контент.
От і все. Сподіваюся цей матеріал допоможе вам розібратися в цьому питанні.