How to select element thats between ranges?

Question

I have side bullets that are menu scrolling to section of onepage, i did a scroll animation but i would like to change class="active" between bullets when scrolling. I know it can be easly achieved by jQuery(body,window).scroll() with $('#scrollspymenu li').each() but its really bad way. I can break out of each() function but this way i still need to get from first li element to (for example) 5th li. I thought about getting all data-target elements to some array with save offsetTop and offsetTop+height and in scroll event i will check which element is on middle of the screen. ( i mean window scroll top position + 1/2 window height)

I have no idea how to make like some kind of timeline with sections with calculated range AND what function can select (based on input) element that is attached to 2 range values.

I'm also using scrollMagic, maybe it does it better? Still would like to use pure js or jquery for future use.

I'm sorry i couldnt form a good specific question but i tried my best.

my comment

(..) I want fastest possible way to get from scrolll event to proper element. Best possible performance of the page. It's stupid when u scroll, 1 scroll tick is 100x on scroll function, and every function goes every element. For 4 elements its checks elements 400 times...

JS

var page = $("html, body");
$('#scrollspymenu a, .go-to, .go-to2').click(function(event) {
    event.preventDefault();
    var target = $(this).attr('data-target');
    if(target){
        page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
           page.stop();
       });
       page.animate({ scrollTop: $(target).offset().top-50 }, 700, function(){
           page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
       });
    }
})

Html Side menu

 <nav id="scrollspymenu">
<ul>
    <li class="active"><a href="#" data-target=".sec-home-knaufgroup"><span>Knauf Group</span></a></li>
    <li><a href="#" data-target=".sec-company-history"><span>History</span></a></li>
    <li><a href="#" data-target=".sec-company-values"><span>Values</span></a></li>
    ()...)
    <li><a href="#" data-target=".sec-company-automobile"><span>Automobile industry</span></a></li>
    <li><a href="#" data-target=".sec-company-solutions"><span>Solutions</span></a></li>
</ul>

Answer 1

First off, I am not 100% sure this resolves your issue, as the intent is not totally clear to me.

What THIS does is if you click on a menu, it scrolls to that associated target. Also if you tab, shift-tab it scrolls to that associated target. If you mouse over a menu, then scroll, it scrolls the target. I think you get the idea and if not a 100% solution perhaps you can build from this.

The console.logstuff should be removed eventually but will illustrate what is firing at what point for you.

var page = $("html,body");
$('#scrollspymenu').on('click scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', 'a', function(event) {
 // event.preventDefault();
  event.stopImmediatePropagation();
  var elem = $(this);
  var target = elem.data('target');
  $('.active').removeClass('active');
  if (!!target) {
    $(target).addClass('active');
    elem.addClass('active');
    console.log('in here');
    page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function() {
      console.log('in stop');
      page.stop(); // stop any animation
    });
    page.animate({
      scrollTop: ($(target).offset().top - 50)
    }, {duration:700, start:function() {
   
      console.log('in callback', $(target).offset().top - 50);
      page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
    }});
  }
})

#pagethings {
  margin-left: 200px;
}

#contentbody {
  float: right;
  width: 100%;
  background-color: #F0F0F0;
}

#scrollspymenu {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #CCCCCC;
  /* fix to top */
  position: fixed;
  /* force scroll bars */
  overflow: scroll;
}

.section {
  margin: 1em;
  padding-bottom: 4em;
}

#clearingdiv {
  clear: both;
}
.active{ background-color: #EECCAA;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pagethings">
  <nav id="scrollspymenu">
    <ul>
      <li class="active"><a href="#" data-target=".sec-home-knaufgroup"><span>Knauf Group</span></a></li>
      <li><a href="#" data-target=".sec-company-history"><span>History</span></a></li>
      <li><a href="#" data-target=".sec-company-values"><span>Values</span></a></li>
      <li><a href="#" data-target=".sec-company-automobile"><span>Automobile industry</span></a></li>
      <li><a href="#" data-target=".sec-company-solutions"><span>Solutions</span></a></li>
    </ul>
  </nav>

  <div id="contentbody">
    <div class="section sec-company-home sec-home-knaufgroup">My Home of my grand thing</div>
    <div class="section sec-company-history">History of my grand thing</div>
    <div class="section sec-company-values">Values of my grand thing</div>
    <div class="section sec-company-automobile">My great car of my grand thing. I might put something bigger in here, pictures etc so I fake this with some text to make it bigger. The brown cow jumped over the crazy blue moon but why is that moon blue and how can that cow breathe when jumping over
      a moon and why is it "over" the moon not "around" the moon for a literal quotation?</div>
    <div class="section sec-company-solutions">Solution of my grand thing, drive my great car fast</div>

  </div>
</div>