Фіксоване меню при прокручуванні сторінки

  1. HTML структура меню
  2. CSS код меню
  3. Окремий класи для фіксованого і нормального стану меню
  4. Трохи CSS3 для краси 🙂
  5. Додамо jQuery ефекти.

Отже, завдання на сьогодні зробити меню, яке прилипає до верхньої частини браузера при прокручуванні сторінки.
Для роботи нам знадобиться бібліотека jQuery і браузер з підтримкою CSS3.
Почнемо з HTML структури нашого меню, а вона особливо не відрізняється від всіх інших.

HTML структура меню

<Div id = "menu"> <ul> <li> <a href="#"> Головна </a> </ li> <li> <a href="#"> Joolma </a> </ li > <li> <a href="#"> WordPress </a> </ li> <li> <a href="#"> HTML5 & amp; CSS3 </a> </ li> <li> <a href = "#"> PHP </a> </ li> </ ul> </ div>

Безумовно, щоб наше меню набуло визнаний вид, ми його трохи стилізуємо.

CSS код меню

#menu {width: 920px; text-transform: uppercase; text-align: center; line-height: 50px; background: # 69c; } #Menu ul {padding: 0; margin: 0; } #Menu li {display: inline; list-style: none; margin: 5px 10px; } #Menu li a {padding: 5px 10px; color: #fff; text-decoration: none; } #Menu li a: hover {background: # 36c; color: # ff0; }

Тепер після всіх підготовчих робіт ми можемо приступити до вирішення самого завдання.

Для того щоб меню прилипало до верху при прокручуванні, нам необхідно дві речі:

  • Перша - знати в якій позиції знаходиться скрол браузера. При пересування між об'єктами потрібний момент змінити стиль нашого меню.
  • Друга - створити окремий клас для меню з фіксованою позицією і шириною на весь екран.

Що стосується першого завдання, то з нею впорається невеликий код jQuery, але спочатку ми створимо окремий стиль для нашого фіксованого і стандартного меню.

Окремий класи для фіксованого і нормального стану меню

# Menu.default {width: 920px; } # Menu.fixed {position: fixed; top: 0; left: 0; width: 100%; }

Додамо новий клас до меню

<Div id = "menu" class = "default">

jQuery код

Тепер код для першого завдання:

$ (Document) .ready (function () {var $ menu = $ ( "# menu"); $ (window) .scroll (function () {if ($ (this) .scrollTop ()> 100 && $ menu. hasClass ( "default")) {$ menu.removeClass ( "default"). addClass ( "fixed");} else if ($ (this) .scrollTop () <= 100 && $ menu.hasClass ( "fixed") ) {$ menu.removeClass ( "fixed"). addClass ( "default");}}); // scroll});

Думаю, що код настільки простий, що в поясненні не потребує. Але все ж прокоментую. Ми використовуємо подія скролл вікна браузера для постійного відстеження позиції смуги прокрутки, при даній події. Написали умови перевірки позиції скрол і стану меню (фіксований чи ні), якщо ми прокрутили сторінку вниз у вказаному ступені, то з'являється фіксований варіант. Друга умова для зміни з фіксованого меню на стандартне.

Ось в принципі і вся реалізація, але ми на цьому не зупинимося і підемо далі.

Трохи CSS3 для краси 🙂

Стилізуємо наше меню за допомогою CSS3, додамо тіней, округлимо кути і т.д. Додамо ще оин клас .alpha-bg, який буде містити значення фону в форматі rgba. Кінцевий варіант стилів:

#menu {text-transform: uppercase; text-align: center; line-height: 50px; background: # 69c; text-shadow: 0 1px 1px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #Menu ul {padding: 0; margin: 0; } #Menu li {display: inline; list-style: none; margin: 5px 10px; } #Menu li a {padding: 5px 10px; color: #fff; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #Menu li a: hover {background: # 36c; color: # ff0; -webkit-transition-property: color, background; -webkit-transition-duration: 0.5s, 0.5s; } .Default {width: 920px; } .Fixed {position: fixed; top: -5px; left: 0; width: 100%; padding: 10px 0; -moz-box-shadow: 5px 5px 20px # 333; -webkit-box-shadow: 5px 5px 20px # 333; box-shadow: 5px 5px 20px # 333; } .Transbg {background-color: rgba (60, 130, 190, 0.7)! Important; }

Отримали красу.

Додамо jQuery ефекти.

Тепер можна погратися з ефектною появою нашого меню. Використовуємо метод hover для додавання і видалення прозорості фону меню при наведенні і видаленні курсора.

$ (Document) .ready (function () {var $ menu = $ ( "# menu"); $ (window) .scroll (function () {if ($ (this) .scrollTop ()> 100 && $ menu. hasClass ( "default")) {$ menu.fadeOut ( 'fast', function () {$ (this) .removeClass ( "default") .addClass ( "fixed transbg") .fadeIn ( 'fast');}) ;} else if ($ (this) .scrollTop () <= 100 && $ menu.hasClass ( "fixed")) {$ menu.fadeOut ( 'fast', function () {$ (this) .removeClass ( "fixed transbg ") .addClass (" default ") .fadeIn ( 'fast');});}}); // scroll $ menu.hover (function () {if ($ (this) .hasClass ( 'fixed') ) {$ (this) .removeClass ( 'transbg');}}, function () {if ($ (this) .hasClass ( 'fixed')) {$ (this) .addClass ( 'transbg');}} ); // hover}); // jQuery

У висновку можна сказати, що немає межі досконалості і продовжувати гратися зі стилями, і ефектами можна ще довго.

Реалізувати це завдання можна і на чистому javaScript, але jQuery має більший інтерес 🙂

На тлі цього уроку з'явилася ще одна думка: зробити розширення основного контенту при зникненні з виду бічної колонки (як ВКонтакте).

Якщо у вас є питання, пропозиції, то сотавляет їх в коментарях нижче, спасибі 🙂