重新排列元素时将活动类添加到锚点

Question

I've 4 divs and their relative anchor tags. Active class is being added to anchors on scroll when the order of the display elements is not changed. When the order of the elements changes, active classes are only being added to the sorted elements. I sorted nav anchors too based on the order. Active class is still not being added to anchors based on the scroll of the element.

Please help me add an active class to anchors based on scroll when nav and elements have the "order" attribute on them. Thanks!

Below is the jsfiddle for the code: http://jsfiddle.net/n2yds3u9/16/

<section id="main">
  <nav>
        <a href="#1" class="active anchors" class="anchors">Punkt 1</a>
        <a href="#2" class="anchors order1">Punkt 2</a>
        <a href="#3" class="anchors">Punkt 3</a>
        <a href="#4" class="anchors order2">Punkt 4</a>
    </nav>
    <div class="target" id="1">TARGET 1
    </div>
    <div class="target order1" id="2">TARGET 2</div>
    <div class="target" id="3">TARGET 3</div>
    <div class="target order2" id="4">TARGET 4</div>
</section>

* {
    margin: 0;
    padding: 0;
}

#main {
    width: 75%;
    float: right;
    display: flex;
    flex-direction: column;
}

#main div.target {
    background: #ccc;
    height: 400px;
}

#main div.target:nth-child(even) {
    background: #eee;
}

nav {
    width: 25%;
    position: relative;
    position: fixed;
    display: flex;
    flex-direction: column;
}


nav a {
    border-bottom: 1px solid #666;
    color: #333;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    order: 999;
}

nav a .anchors{
  
}


nav a:hover, nav a.active {
    background: #666;
    color: #fff;
}
.target{
  order: 999;
}
.target.order1{
  order: 1;
}
.target.order2{
  order: 2;
}

a.anchors.order1{
  order: 1;
}
a.anchors.order2{
  order: 2;
}

$('#nav nav a').on('click', function(event) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('nav a').removeClass('active');
            $('nav a[href=#'+ id +']').addClass('active');
        }
    });
});

Answer 1

Since anchors are sorted via css, they are not changed in the DOM, hens javascript is not aware of their visible position. So, one solution is to create a list of ordered elements and loop through them:

 const anchors = getOrder("#main > nav > a"), targets = getOrder(".target") $('#nav nav a').on('click', function(event) { $(this).parent().find('a').removeClass('active'); $(this).addClass('active'); }); $(window).on('scroll', function() { const top = $(window).scrollTop(), height = $(window).height() / 2; for(let i = targets.length-1, active, found; i > -1; i--) { active = !found && top >= $(targets[i]).offset().top - height; anchors[i].classList.toggle("active", active); if (active) found = true; } }).trigger("scroll"); //initialize function getOrder(query) { return Array.from(document.querySelectorAll(query)).reduce((a,b,i) => { const order = +getComputedStyle(b).order; a[order == 999 ? a.length + order : order] = b; return a; }, []).filter(a => a !== undefined); }

 * { margin: 0; padding: 0; } #main { width: 75%; float: right; display: flex; flex-direction: column; } #main div.target { background: #ccc; height: 100vh; } #main div.target:nth-child(even) { background: #eee; } nav { width: 25%; position: relative; position: fixed; display: flex; flex-direction: column; } nav a { border-bottom: 1px solid #666; color: #333; display: block; padding: 10px; text-align: center; text-decoration: none; order: 999; } nav a .anchors{ } nav a:hover, nav a.active { background: #666; color: #fff; } .target{ order: 999; } .target.order1{ order: 1; } .target.order2{ order: 2; } a.anchors.order1{ order: 1; } a.anchors.order2{ order: 2; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <section id="main"> <nav> <a href="#1" class="active anchors" class="anchors">Punkt 1</a> <a href="#2" class="anchors order1">Punkt 2</a> <a href="#3" class="anchors">Punkt 3</a> <a href="#4" class="anchors order2">Punkt 4</a> <a href="#5" class="anchors">Punkt 5</a> <a href="#6" class="anchors">Punkt 6</a> </nav> <div class="target" id="1">TARGET 1 </div> <div class="target order1" id="2">TARGET 2</div> <div class="target" id="3">TARGET 3</div> <div class="target order2" id="4">TARGET 4</div> <div class="target" id="5">TARGET 5</div> <div class="target" id="6">TARGET 6</div> </section>