Міняємо активний пункт меню при прокручуванні сторінки

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

Все це робиться щоб користувачеві було легше орієнтуватися на одностранічнік і щоб він знав, де саме зараз знаходиться.

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

Для реалізації ідеї, ми повинні створити HTML-структуру нашого плаваючого меню

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

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

Тепер додати трохи стилів для нашого меню.

Тут ви можете задавати все що завгодно, єдине, що варто відзначити, це повинно бути обов'язково вказано правило для посилання з класом .active.

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

Ну і тепер трохи jQuery. За основу я взяв скрипт, який був представлений в цій статті. Правда певні зміни він все ж пережив.

У цьому коді, в принципі, нічого міняти не потрібно, хіба тільки значення змінної menu_selector. Вона повинна містити назву класу або ідентифікатора, обгортки нашого меню. Якщо ваше меню обгорнуте не в тег з класному .top_menu. то змініть це значення.

До речі, якщо ви більше любите jQuery плагіни, то замість наведеного вгорі jQuery коду, ви можете підключити до сторінці плагін jquery.changeActiveNav.js (він є в додаткових матеріалах).

І потім просто його проініціалізіруйте.

Я цей плагін написав сам, хоча по суті, він складається з того ж jQuery коду, який був зазначений вище. Просто я упакував його в формат плагіна, для зручності використання на різних сайтах.

Тепер, якщо ви все зробив правильно, у вас повинно заробити.

Так як, ми з вами для класу .active задали певні стилі в CSS, то тепер цей пункт меню буде виділятися відповідним чином.

Якщо ж ми просто кликнемо по пункту меню, то буде зроблена прокрутка до відповідного розділу.