Фіксоване меню при прокручуванні сторінки
Отже, завдання на сьогодні зробити меню, яке прилипає до верхньої частини браузера при прокручуванні сторінки.
Для роботи нам знадобиться бібліотека jQuery і браузер з підтримкою CSS3.
Почнемо з HTML структури нашого меню, а вона особливо не відрізняється від всіх інших.
HTML структура меню
Безумовно, щоб наше меню набуло визнаний вид, ми його трохи стилізуємо.
CSS код меню
Тепер після всіх підготовчих робіт ми можемо приступити до вирішення самого завдання.
Для того щоб меню прилипало до верху при прокручуванні, нам необхідно дві речі:
- Перша - знати в якій позиції знаходиться скрол браузера. При пересування між об'єктами потрібний момент змінити стиль нашого меню.
- Друга - створити окремий клас для меню з фіксованою позицією і шириною на весь екран.
Що стосується першого завдання, то з нею впорається невеликий код jQuery, але спочатку ми створимо окремий стиль для нашого фіксованого і стандартного меню.
Окремий класи для фіксованого і нормального стану меню
Додамо новий клас до меню
jQuery код
Тепер код для першого завдання:
Ось в принципі і вся реалізація, але ми на цьому не зупинимося і підемо далі.
Трохи CSS3 для краси
Стилізуємо наше меню за допомогою CSS3, додамо тіней, округлимо кути і т.д. Додамо ще оин клас .alpha-bg, який буде містити значення фону в форматі rgba. Кінцевий варіант стилів:
Додамо jQuery ефекти.
Тепер можна погратися з ефектною появою нашого меню. Використовуємо метод hover для додавання і видалення прозорості фону меню при наведенні і видаленні курсора.
У висновку можна сказати, що немає межі досконалості і продовжувати гратися зі стилями, і ефектами можна ще довго.
На тлі цього уроку з'явилася ще одна думка: зробити розширення основного контенту при зникненні з виду бічної колонки (як ВКонтакте).
Добрий день. У мене схоже запитання, тільки на reg.ru хостинг, немогу зрозуміти куди jQuery код потрібно додати і якщо просто новий файл з цим кодом створити, то як його обізвати щоб він працював? Додав блок з html, css в style і jQuery спочатку в новий створений файл menu.js в папку на серваке js, прописав в блок з меню підключення jquery такого виду:
пробував і простіше, але це на мій погляд найоптимальніший, і нічого не вийшло. Красива синия менюшка з'явилася, однак вона не залепает, іншими словами jQuery не працює. Я не дуже сильний в усьому цьому. а особливо в js, якщо не складно підкажіть який нибудь вихід з цієї ситуації.
Зазделегідь дякую
Добрий день. Ви мені дуже допомогли, Новомосковський вас постійно. А як зробити що б меню після прокрутки на определёноое кількість пікселів з'являлося плавно, а не ривком? Чекаю помощі.Заранее спасибі.
Спробуйте вказати нижню межу для опускання і тоді ваше умова змінитися наступним чином
if ($ (window) .scrollTop ()> sidebarTop || $ (window) .scrollTop ()> sidebarBottom), де sidebarBottom - це $ (el) .offset (). top + $ (el) .height ();
якось так
Я дуже погано розумію js ....
тобто треба додати цю умову
if ($ (window) .scrollTop ()> sidebarTop || $ (window) .scrollTop ()> sidebarBottom)
пояснити sidebarBottom так ?:
var sidebarBottom = $ (el) .offset (). top + $ (el) .height ();
можете будь ласка цілий код написати, а то я точно все неправильно
зроблю
height (тут висота або так порожньо і залишати?);
Добридень! Допоможіть закріпити модуль (Joomla 3.x, GavickPro template)! Хочу закріпити модуль «topbar» при скролінгу, він спочатку розташований у верхній частині сторінки по всій ширині і катається разом з прокруткою.
Є тільки одне конкретне питання: допоможіть розібратися, в який файл що вставляти (іноді плутаю css і html). Прочитав досить ресурсів, але мало толку, коли не знаєш, куди копіювати.
Добрий день, а як мені вам допомогти?
Доброї ночі, відмінний варіант фіксованого меню.
А як доопрацювати готовий jQuery код, так щоб при прокручуванні сторінки до кінця зафіксоване меню зверху пропадало (т. Е. Напевно клас змінювався на Default)?
Пробував вставляти ось це третім умовою:
else if ($ (this) .scrollBottom () = $ Menu.hasClass ( «fixed»)) $ menu.fadeOut ( 'fast', function () $ (this) .removeClass ( «fixed»)
.addClass ( «default»)
.fadeIn ( 'fast');
>);
>
Чи не спрацювало! Чи не могли б ви підказати що не так і взагалі правилное напрямок у мене?
Ще на вашому сайті на одному пості я залишав питання з приводу 'плавного переходу »- запрацювало вже.
Привіт, зауважив що ви не підключили бібліотеку jQuery до вашого проекту, по-цьому скрипт і не працює у вас на сайті.
Підключіть бібліотеку і відпишіть, я подивлюся код
Підкажіть будь ласка. Роблю меню для переходу по закладках на одній сторінці, і ось при переході з одного пункту в інший частина відкриває пункту ховається під меню, як це можна виправити?
якщо дизайн дозволяє, то просто додайте внутрішній відступ зверху, на висоту меню, для кожного «відкривається пункту»
а якщо дизайн такого не дозволяє, то пишіть, потрібно буде скриптом правити
Добрий день. Справа в тому, що ваш блок спочатку має фіксовану позицію і відступ зверху від сторінки в 75 пікселів. Подивіться код моєї статті, він вам допоможе. Меню потрібно реалізувати, так щоб воно спочатку було під хеддером і тільки при прокручуванні ми скриптом міняємо йому клас з фіксованою позицією.
Дмитро. спасибі за Вашу відповідь, тут ось яка ситуація: червоний блок для статичного меню розташований перед тегом body, ось його код
var sm_bg_block = «# block-new9"; // ідентифікатор основний панелі меню
var sm_gap = 75; // зрушення меню (в пікселях) від вірніше кордону вікна
var sm_shift = 0; // зрушення меню (в пікселях) по горизонталі щодо центру екрана
/ * Для коректної роботи menu подальший код змінювати не рекомендується * /
var sm_menu = «»;
var sm_x_crd = [];
var sm_y_crd = [];
var sm_bg_top, sm_bg_left, sm_bg_bot, sm_bg_right, sm_bg_zi;
var sm_i = 0;
var sm_x = 0;
var sm_y = 0;
var sm_bg_w = 0;
sm_bg_zi = parseInt ($ (sm_bg_block) .css ( «z-Index»));
sm_bg_top = parseInt ($ (sm_bg_block) .css ( 'top'));
sm_bg_left = parseInt ($ (sm_bg_block) .css ( 'left'));
sm_bg_right = sm_bg_left + $ (sm_bg_block) .width ();
sm_bg_bottom = sm_bg_top + $ (sm_bg_block) .height ();
$ ( 'Div'). Each (function ()
if (
(sm_bg_zi
(Sm_bg_bottom> (parseInt ($ (this) .css ( 'top')) + $ (this) .height ())))
)
sm_menu + = ( «#» + $ (this) .attr ( 'id') + »,«);
>
>);
sm_menu = sm_menu.substring (0, sm_menu.length-2);
$ (Sm_bg_block) .css ( 'position', 'fixed');
$ (Sm_bg_block) .css ( 'z-index', parseInt ($ (sm_bg_block) .css ( 'z-index')) + 500);
$ ( 'Body'). Append ($ (sm_bg_block));
$ (Sm_menu) .each (function ()
$ (This) .css ( 'position', 'fixed');
$ (This) .css ( 'z-index', parseInt ($ (this) .css ( 'z-index')) + 500);
$ ( 'Body'). Append ($ (this));
>);
sm_bg_top = $ (sm_bg_block) .position (). top;
sm_bg_left = $ (sm_bg_block) .position (). left;
$ (Sm_menu) .each (function ()
sm_x_crd [sm_i] = $ (this) .position (). left - sm_bg_left;
sm_y_crd [sm_i] = $ (this) .position (). top - sm_bg_top;
sm_i ++;
>);
sm_bg_w = $ (sm_bg_block) .width ();
sm_y = sm_gap;
sm_i = 0;
$ (Sm_menu) .each (function ()
$ (This) .css ( 'top', sm_y + sm_y_crd [sm_i]);
sm_i ++;
>);
$ (Sm_bg_block) .css ( 'top', sm_y);
$ (Window) .resize (function ()
sm_i = 0;
sm_x = ($ (window) .width () - sm_bg_w) / 2 + sm_shift;
$ (Sm_bg_block) .css ( 'left', sm_x);
$ (Sm_menu) .each (function ()
$ (This) .css ( 'left', sm_x + sm_x_crd [sm_i]);
sm_i ++;
>);
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
>);
Як я вас розумію, потрібен ще один код з Вашої статті та слід додати його після тега body, і тоді при прокручуванні сторінки вниз блок буде впритул прилягати (зміщуватися) до верхньої межі сторінки, поправте будь ласка, якщо я помиляюся, просто я новачок в цьому справі, сподіваюся на Вашу допомогу.
На жаль ви працюєте через конструктор, можливо у них є тих підтримка, яка вам допоможе. Я з ним не знайомий і дати більше ніж є в статті не зможу з приводу коду і що куди вставляти
відразу скажу. що радять використовувати команду gap, так ось вона ніяк не впливає на прилипання статичного меню до верхньої межі сторінки при прокручуванні її
вниз
Тут я не зовсім зрозумів про що йде мова) Дане меню реалізується за допомогою звичайного CSS і jQuery, подивіться код в статті.
Дмитро, дякую за приклад коду, дуже виручили. Є ще питання - на сторінці вже є скрипт на jquery - для збільшення фото (fancybox) з власної папкою з бібліотекою і файлами. При спробі прописати на сторінку код фіксованого меню відбувається якийсь «конфлікт скриптів» - перестає працювати fancybox - фото відкриваються в окремому вікні. Забираю зі сторінки посилання на бібліотеки від фіксованого меню - fancybox працює, а меню після зворотного скролінгу «залипає» в розширеному стані і не повертається на своє місце на сторінці. У чому може бути справа, чи не підкажете? Заздалегідь дякую.
Привіт, на жаль не підкажу, тому що тому що Ви описали може бути маса причин. Але швидше за все просто помилка в скрипті, відкрийте консоль в браузері і подивіться що в ній пишуть з цього приводу або дайте посилання на сайт я подивлюся)
Правильно буде знайти в файлі скриптів ту частину яка перемикає стан меню і видалити її.
Або просто видалити стилі для фіксованого стану меню .fixeddiv
Підкажіть, будь ласка, що я повинен замінити у вашому скрипті, щоб адаптувати його під шаблон jv_chao?
var $ menu = $ ( «# jv-mainmenu»);
$ (Window) .scroll (function () if ($ (this) .scrollTop ()> $ header.height (); $ Menu.hasClass ( «default»)) $ menu.removeClass ( «default»). AddClass ( «fixed»);
> Else if ($ (this) .scrollTop () <= $header.height(); && $menu.hasClass("fixed")) $menu.removeClass("fixed").addClass("default");
>
>); // scroll
>);
так має бути?
Здрастуйте, панове. Є питання ... і по ходу пошуків в інтернеті судьбінушка привела до вас. У яві ничерта не розумію, але походу ваша тема і приклад вищеописаного меню збігається з моїм питанням.
Є інтернет магазин kofe78.ru у цього сайту меню точнісінько як мені треба (без дизайну ес-но)
Коштує все це справа на opencart.
І прикручувати мені потрібно теж в opencart.
Якщо є можливість показати як це здійснюється буду безмірно вдячний. Хоча б незграбно ...
На скільки я зрозумів там одне меню має позицію fixed яке горизонтальне. А як ось зробити щоб з нього ще одне виповзали.