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

В этой демонстрации мы будем использовать простые функции jQuery для достижения нашей цели.

Ожидаемый результат:

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

Живая демонстрация

Первый шаг: создание разметки

Разметка очень проста и легка. Мы собираемся создать простую панель навигации с несколькими пунктами меню, как на www.instantshift.com. На нем есть несколько элементов, таких как «Главная», «Веб-дизайн», «CSS», «Инструменты», «Учебники» и т. д. Страница будет иметь различные блоки текстового содержимого. Вот как выглядит разметка.

Наша 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») и выберет элемент с идентификатором 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');
            }
 });

Вот полный скрипт.

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

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

Здесь вы можете увидеть это меню действий в живом действии. Кроме того, вы можете загрузить исходные файлы, чтобы редактировать и напрямую использовать их в том, что вам нравится.

Живая демонстрация  Скачать Исходный код