SO - jQuery active class on scroll

For stackoverflow question: http://stackoverflow.com/questions/42730961/how-to-add-active-class-on-scroll-in-jquery

by Flame Denise

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
    <div id="first" data-msid="1">
      After being involved in over 
      160 Tests and 370 ODIs, Ponting is 
      Australia's leading run-scorer in Test and 
      ODI cricket. He is one of only four players 
      (along with Sachin Tendulkar, Rahul Dravid and 
      Jacques Kallis) in history to have scored 
      13,000 Test runs. Statistically, he is one 
      of the most successful captains of all time, 
      with 48 victories in 77 Tests between 2004 and  After being involved in over 
      160 Tests and 370 ODIs, Ponting is 
      Australia's leading run-scorer in Test and 
      ODI cricket. He is one of only four players 
      (along with Sachin Tendulkar, Rahul Dravid and 
      Jacques Kallis) in history to have scored 
      13,000 Test runs. Statistically, he is one 
      of the most successful captains of all time, 
      with 48 victories in 77 Tests between 2004 and 31 December  After being involved in over 
      160 Tests and 370 ODIs, Ponting is 
      Australia's leading run-scorer in Test and 
      ODI cricket. He is one of only four players 
      (along with Sachin Tendulkar, Rahul Dravid and 
      Jacques Kallis) in history to have scored 
      13,000 Test runs. Statistically, he is one 
      of the most successful captains of all time, 
      with 48 victories in 77 Tests between 2004 and  After being involved in over 
      160 Tests and 370 ODIs, Ponting is 
            160 Tests and 370 ODIs, Ponting is
       After being involved in over 
      160 Tests and 370 ODIs, Ponting is 
      Australia's leading run-scorer in Test and 
      ODI cricket. He is one of only four players 
      (along with Sachin Tendulkar, Rahul Dravid and 
      Jacques Kallis) in history to have scored 
      13,000 Test runs. Statistically, he is one 
      of the most successful captains of all time, 
      with 48 victories in 77...

CSS

.item {
  width:25%;
  display:inline-block;
  margin:0;
  padding:0;
  color:blue;
  font-size:20px;
  
}

.active {
  color : red;
  font-weight: bold;
}

.footer {
  border:1px solid;
  position:fixed;
  width:100%;
  bottom:0px
}

#container {
  border:1px solid red;
  overflow:auto;
  width:100%;
  height:300px
}

.fC {
  background-color:yellow
}

#first {
  background-color:blue
}

#second {
  background-color:green
}

#three {
  background-color:pink
}

#fourth {
  background-color:red
}

JavaScript

$(function(){
  $( "#container" ).scroll(function() {
    console.log('scrolling');     

    // remove 'active' class from previous one
    $('.fC li').removeClass('active');

    $.each( $('#container > div'), function() {
      var msid = $(this).attr('data-msid');
      
      if (isScrolledToView(this)) {
      	console.clear();
        console.log('div #'+msid+' is on screen')
        $(".fC li[data-msidatrr='" + msid + "']").addClass('active');
      } else {
        $(".fC li[data-msidatrr='" + msid + "']").removeClass('active');
      } /* END if else */
    })
  });
})

// Credits to reference: http://stackoverflow.com/a/22480938/2562819
function isScrolledToView(el) {
    var container = document.getElementById('container').getBoundingClientRect();
    var div = el.getBoundingClientRect();

    console.log('container.top = '+container.top+'; container.bottom = '+container.bottom)

    return ((div.top >= container.top) && (div.top <= container.bottom));
}