How to change the class of the body when scrolling to a specific element?

Question

JavaScript

Hello.
It is necessary that when scrolling the page to a block with a specific id, a class is added to the body. And when scrolling above, the class was removed.
How can this be done with jQuery?

Answer 1

document.onscroll = function(){
  var what = document.querySelector("#id").getBoundingClientRect().top;
  document.body.classList.toggle(
    "class", what <= window.innerHeight
   );
}

jsfiddle.net/eoeyuo30/1
Or on jq :

$(document).scroll(function(){
  var what = $("#id").offset().top, 
        pos = $(window).height() + $(window).scrollTop()
  $("body").toggleClass("class", what <= pos);
});

jsfiddle.net/eoeyuo30/2

Answer 2

More or less like this

$(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.element').offset().top){
      $('body').addClass('new-class');
    }
  });