У зв'язку з раптово навалилася на мене «верстальних» роботою, доводиться раз по раз згадувати старі прийоми і знаходити рішення нових проблем. Так ось, як бути, якщо потрібно прикріпити меню або будь-якої блок до верху екрана, і щоб при прокручуванні контенту вниз - цей блок не прокручувався разом з ним?
Ось, власне, як виглядають такі меню
В цілому дуже корисна штука в сфері електронної комерції, для Лендінзі зокрема. Спорудити таке меню теж вельми просто. Зробимо ми закріплене меню за допомогою CSS і jQuery. Просто слідуйте цим простим крокам:
1. Підключаємо скрипт.
Викачуємо собі бібліотеку jquery-1.10.2.min.js і додаємо її собі на сервер, наприклад в підпапку / js сайту.
Далі, в
сторінки вставляємо започатковано код:Потім всередині все того ж блоку
додаємо наступний код всередині тега script:2. Налаштовуємо CSS вид нашого плаваючого меню.
Наступний код вставте в підключений до сторінки css-файл:
3. Вносимо зміни в HTML файл.
От і все. Тепер все, що всередині контейнерів «nav-container» і «nav» буде закріплено до верху і залишиться перед очима відвідувача при прокручуванні контенту.
Ці статті ще цікавіше:
- Що робити якщо placeholder не працює в Internet Explorer 9 (8, 7)
- Як зробити спливаюче вікно на сайті?
- Що робити, якщо Font Awesome не працює в Firefox?
- Лендінзі: 5 практичних инсайтов.
- Безкоштовний конструктор Лендінгем Пейдж - Sitecake
- Як відновити видалені повідомлення вконтакте?
- створення Лендінзі
- 8 способів шукати в Google швидше
