Навигационное меню для лендинга | Landing page navigation menu

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции. Меню реализовано с использованием библиотеки jQuery.

ДЕМО

HTML КОД:

<nav>
    <ul>
        <li><a href="#section-1">Секция 1</a></li>
        <li><a href="#section-2">Секция 2</a></li>
        <li><a href="#section-3">Секция 3</a></li>
        <li><a href="#section-4">Секция 4</a></li>
        <li><a href="#section-5">Секция 5</a></li>
    </ul>
</nav>
<header>Шапка</header>
<section id="section-1">Секция 1</section>
<section id="section-2">Секция 2</section>
<section id="section-3">Секция 3</section>
<section>Секция без пункта меню</section>
<section id="section-4">Секция 4</section>
<section id="section-5">Секция 5</section>
<footer>Подвал</footer>

CSS КОД:

В данном примере предусмотрена возможность выделять не только пункт меню видимой секции, но и ее саму, используя класс section.active

nav {
    height: 80px; 
    position: fixed; 
    top: 0;
    left: 0;
    background: #337AB7;
    width: 100%;
    font-family: Verdana, sans-serif;    
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 80px; 
}
nav ul li {
    margin: 0 10px;
}
nav ul li a {
    color: #BFE2FF;
    display: inline-flex;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}
nav ul li a:hover {
    color: #FFF;
}
nav ul li a.active {
    border-bottom: 2px solid #FFF;
    padding-bottom: 6px;
    color: #FFF;
}
section,
header,
footer {
    background: #fff;
    border-bottom: 4px solid #337AB7;
    height: 600px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    text-transform: uppercase;
    color: #337AB7;
    font-weight: bold;
    font-family: Verdana, sans-serif;       
}
section:nth-child(even) {
    background: #BFE2FF;
}
section:first-child {
    margin-top: 60px;
}
section.active {
    /* Стиль для активной секции */
}
header,
footer {
    height: 400px;
    background: #337AB7;
    color: #FFF;
}

jQuery КОД:

180 в данном коде - это произвольное значение, позволяющее переключиться на нижнюю секцию немного раньше, чем она дойдет до фиксированного меню.

let sections = $('section'), 
nav = $('nav'), 
nav_height = nav.outerHeight();
$(window).on('scroll', function () {
    $('nav a').removeClass('active');
    let cur_pos = $(this).scrollTop(); 
    sections.each(function() {
        let top = $(this).offset().top - nav_height - 180,
        bottom = top + $(this).outerHeight();       
        if (cur_pos >= top && cur_pos <= bottom) {
            nav.find('a').removeClass('active');
            sections.removeClass('active');    
            $(this).addClass('active');
            nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
        }
    });
});
nav.find('a').on('click', function () {
    let $el = $(this), 
    id = $el.attr('href'); 
    $('html, body').animate({
        scrollTop: $(id).offset().top - nav_height
    }, 600);
    return false;
});