Выделите стиль меню изменения элементов на прокрутке

Question

У меня есть одностраничный веб-сайт, состоящий из 5 различных разделов с фиксированной навигацией вверху. В этой навигации у меня есть 5 ссылок, которые ссылаются на соответствующий раздел страницы. При нажатии он плавно прокручивается вниз к этому разделу. У меня проблема с активным классом. В верхней части страницы ссылка «о» имеет активный класс, который добавляет толстую рамку к нижней части ссылки. Но когда я прокручиваю вниз до следующего раздела «районы катания», я хочу, чтобы активный класс удалил себя из «около» и добавил себя в «районы катания».

Вот мой HTML:

<div class="desktop-navbar">
    <img class="logo-desktop" src="img/logo-desktop.png">
    <div id="desktop-nav">
        <a href="#5">CONTACT</a>            
        <a href="#4">PRICING AND SERVICES</a>
        <a href="#3">FACILITY</a>
        <a href="#2">RIDING AREAS</a>
        <a href="#1" class="active">ABOUT</a>
    </div>
</div>

А вот CSS:

.desktop-navbar {
    display: block;
    width: 100%;
    height: 75px;
    background-color: white;
    box-shadow: 0 5px 60px rgba(0,0,0,0.15);
    position: fixed;
}
#desktop-nav a {
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Chau Philomene One', sans-serif;
    margin-top: 43px;
    transition: 0.5s;
}
a.active {
    border-bottom: thick solid #F15B29;
}

Я знаю, что это можно сделать с помощью jQuery, но я Я не смог найти способ, который работал бы для меня, и я не очень свободно владею JS, поэтому я не уверен, как go об этом.

Answer 1

Как уже предлагалось, использовать плагин, такой как ScrollSpy , было бы проще и дает лучшую точность в отзывчивых представлениях, учитывающих различные области просмотра. Но так мы можем это сделать, используя jQuery:

$(document).ready(function () {
var links=$('#desktop-nav a');
    $(document).on("scroll", onScroll);
    //Change Class when we load the pageUrl with an anchor hash ex : page.html#1
    var hash = window.location.hash;
        if(hash) {
        links.removeClass('active');
        $('#desktop-nav a[href="' + hash +'"]').addClass('active');
        $('html, body').animate({
            scrollTop: $(hash).offset().top + 'px'
        }, 1000, 'swing');
    }
    //Change The class OnClick
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        links.removeClass('active');
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing');
    });
});
//Handle scrolling event
function onScroll(event){
var margin=75; //close to the sticky menu height here
var links=$('#desktop-nav a');
    var scrollPos = $(document).scrollTop();
    links.each(function () {
        var currLink = $(this);
        var elm = $(currLink.attr("href"));
        //check if scrolling position is matching the active anchor id
        if ((elm.position().top)+margin <= scrollPos && elm.position().top + elm.height() > (scrollPos+margin)) {
            links.removeClass("active");
            currLink.addClass("active");
        }
    });
}

.desktop-navbar {
    display: block;
    width: 100%;
    height: 75px;
    background-color: white;
    box-shadow: 0 5px 60px rgba(0,0,0,0.15);
    position: fixed;
}
#desktop-nav a {
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Chau Philomene One', sans-serif;
    margin-top: 43px;
    transition: 0.5s;
}
a.active {
    border-bottom: thick solid #F15B29;
}
section{padding-top:75px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-navbar">
    <img class="logo-desktop" src="img/logo-desktop.png">
    <div id="desktop-nav">
        <a href="#5">CONTACT</a>            
        <a href="#4">PRICING AND SERVICES</a>
        <a href="#3">FACILITY</a>
        <a href="#2">RIDING AREAS</a>
        <a href="#1" class="active">ABOUT</a>
    </div>
</div>
<section id="1">
<h2>ABOUT US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>
<section id="2">
<h2>Riding spots</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>
<section id="3">
<h2>Facility</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>
<section id="4">
<h2>Pricing and services</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>
<section id="5">
<h2>Contact Us</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>
<section id="footer">
<h2>Footer Links/widgets...</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</section>

Answer 2

В vanilla JS вы можете добавить атрибут id к каждому тегу <a>, а затем использовать let elem = document.getElementById('your id'), чтобы найти определенную ссылку. А затем добавьте или удалите необходимый класс по elem.classList.add/remove("class"). Или используйте elem.classList.toggle("class") для переключения класса.