Як зафіксувати меню при прокручуванні, щоб не зникло

Вітаю вас, Новомосковсктелі цього блогу. Сьогодні я хочу розповісти, як зафіксувати меню при прокручуванні сторінки вниз, щоб воно завжди було на увазі. Така поведінка реалізовано на багатьох сайтах. Давайте і ми спробуємо розібратися, як це працює. Я покажу два способи фіксації: на чистому css (з деякими умовностями) і за допомогою jQuery.

Як зробити фіксоване меню без скриптів?

Отже, найпростіший спосіб - це використовувати фіксоване позиціонування і з його допомогою спозиционировать меню в потрібне місце, після чого при прокручуванні воно не буде зникати. Давайте спробуєм.

Я по-швидкому зробив розмітку. Як бачите, я навіть не став використовувати список і просто так перерахував посилання в контейнері nav. А це стилі:

#menu width: 100%;
>
#menu a color: #fff;
display: inline-block;
width: 20%;
background: linear-gradient (to right, rgba (206,220,231,1) 0%, rgba (89,106,114,1) 100%);
margin-right: -4px;
font-size: 18px;
text-align: center;
padding: 10px 0;
>

Зазвичай фіксоване меню тягнеться на всю ширину сторінки. Ми теж так зробимо. Відповідно, оскільки пунктів меню 5, то ширина кожного нехай буде по 20%, тоді вони займуть повністю всю ширину вікна.

Меню стане в самий верхній лівий кут сайту, також воно випаде з потоку нормальних блоків і вони просто перестануть його помічати. Варто відзначити, що я вважаю за доцільне варіант на css тільки в тому випадку, якщо меню по дизайну повинно бути самим верхнім елементом. Якщо у вас не так, я рекомендую другий спосіб, який зараз і розглянемо.

Фіксоване меню на css і jquery

Для цього способу вам знадобиться підключення бібліотеки jquery. Скачайте її з офіційного сайту розробників, якщо у вас її ще немає. Файл потрібно помістити в папку з нашими файлами, з якими ми працюємо. Також потрібно підключити саму бібліотеку, а також файл, в якому ми напишемо сценарій для реалізації фіксування.

Отже, ось цими двома рядками ми підключаємо ці файли. Розмітка меню не буде нічим відрізнятися, за винятком того, що до nav потрібно додати стильовий клас.

Суть в тому, що ми в jquery при певному подію будемо перемикати класи. Ось такі стилі:

# Menu.normal width: 100%;
>
# Menu.fix position: fixed;
top: 0; left: 0;
width: 100%;
>

Тобто normal це просто наше меню за замовчуванням. При такому способі йому не обов'язково розташовуватися в самому верху сторінки, воно може перебувати де завгодно. Клас fix додає до меню фіксоване позиціонування і координатами отруює його в верхній лівий край вікна. Тепер все готово і залишилося написати веб-сценарій, який буде реалізувати перемикання класів. За замовчуванням класу fix немає у нашого меню, він буде додаватися при певному подію. Ось сам сценарій:

$ (Document) .ready (function () var $ menu = $ ( «# menu»);
$ (Window) .scroll (function () if ($ (this) .scrollTop ()> 150 # 038; # 038; $ Menu.hasClass ( «normal»)) $ menu.removeClass ( «normal»). AddClass ( «fix»);
> Else if ($ (this) .scrollTop () normal. То цей клас повинен забратися, а замість нього додатися fix. Який і робить меню фіксованим.

Нижче реалізовується і зворотну дію - якщо користувач прокручує менше 150 пікселів від самого верху вікна, то клас fix має прибиратися і ставитися клас за замовчуванням.

Тепер визначте селектору body висоту в кілька тисяч пікселів, щоб з'явився вертикальний скрол і спробуйте прокрутити сторінку вниз. Меню буде залишатися вгорі. При цьому воно буде знаходитися на своєму первісному положенні до того моменту, як ви перейдіть 150 пікселів, після чого вже гарантовано відправиться в лівий верхній кут.