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

У цій демонстрації ми будемо використовувати прості функції jQuery для досягнення нашої мети.

Очікуваний результат:

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

Жива демо

Перший крок: створення розмітки

Розмітка дуже проста і легка. Ми збираємося створити просту панель навігації з кількома пунктами меню, як у нас на www.instantshift.com. У ньому є кілька елементів, як-от Home, Web Design, CSS, Tools, Tutorials тощо. Сторінка матиме різні блоки текстового вмісту. Ось як виглядає розмітка.

Наша розмітка Html готова, тепер настав час додати стиль CSS.

Крок другий: додавання класів CSS.

body{
      background-color:#520000;font-size:17px;
}
 
#maindiv{
      background:#F4F3E8 url(images/page_bg.webp);
}
 
#title h1 {
     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;
}
 
.container {
     width: 1000px;margin: 0 auto;padding: 38px 0;
}
 
#wrapper{
     margin:0px auto;
}
 
#sidebar {
    width:250px;float:left;
}
 
#content {
   width:720px;float:right;padding-left:12px;
}
 
#title {
   width: 900px;height: 60px;float: right;
}
 
.clear:after {
   visibility: hidden;display: block;content: "";clear: both;height: 0;
}
 
nav {
  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;
}
 
nav.stickydiv {
   position: fixed;top: 0;z-index: 10000;margin-top:12px;
}
 
nav ul {
list-style-type:none;margin:0;padding:0;
}
 
nav li {
padding:5px 10px;
}
 
nav li a {
color:#fff;font-weight:700;line-height: 25px;
}
 
a{
text-decoration:none;
}
 
.active {
color: #F99;text-decoration: none;
}
 
p{
font-family:Verdana,Arial,Helvetica,sans-serif;
}
 
footer p{
  color:#fff;
}

Крок третій: перевірка ігрового майданчика “jQuery”.

Перш за все ми переконаємося, що після натискання посилань меню відповідний div має прокручуватися вгору. Як ви можете бачити в наведеному нижче коді, після натискання посилання на пункт меню ми видаляємо «активний» клас поточного вибраного пункту меню та додаємо активний клас до посилання на пункт, на який натиснули.

Потім ми отримуємо ідентифікатор клацнутого елемента. this.hash поверне «#foo», який є селектором ідентифікатора. Отже, $(this.hash) те саме, що $(“#foo”), і він вибере елемент з ID foo.

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
         
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
         var target = this.hash,
         menu = target;
        $target = $(target);
               
       $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 600, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });

Під час події прокручування ми перевіряємо положення елементів щодо величини прокручування, а також суми їх висоти та положення. На цій основі ми додаємо та видаляємо активний клас пунктів меню.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top  scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

і під час останньої події прокручування сторінки ми перевіряємо, чи буде бічна панель липкою чи ні.

$(window).scroll(function(){
        // the "12" should equal the margin-top value for nav.stickydiv
        var window_top = $(window).scrollTop() + 12;
        var div_top = $('#checkdiv').offset().top;
            if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
 });

Ось повний сценарій.

Ось так, це легко, правда? Насолоджуйтесь! Не забудьте переглянути демо.

Жива демонстрація та вихідний код

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

Демо-версія  Завантажити вихідний код