CSS Change Background Color at Certain Point

Question

I would like the background of the entire site to change from white to black when a certain element comes into view. So when you scroll by the element the background transitions

Answer 1

If you only want something to happen when the element is in the viewport, you can find the top/bottom positions of the element and compare it to the scrolled distance and bottom of the window.

$(window).on('resize scroll',function() {
  var $div = $('div'),
      $body = $('body'),
      st = $(this).scrollTop(),
      wh = $(this).height(),
      wb = st + wh,
      dh = $div.height(),
      dt = $div.offset().top,
      db = dh + dt;
  if (dt < wb && db > st) {
    $body.addClass('color');
  } else {
    $body.removeClass('color');
  }
})

section {
  height: 150vh;
}
div {
  background: black;
  height: 200px;
}
.color {
  background: red;
}