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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<div></div>
<section></section>

Answer 2

I assume your real issue are the first to lines in your CSS which is not valid. Have a look at the reference. If you want to select all .colorChange inside of #pageWrapper use:

#siteWrapper .colorChange {}

Also remove the "#" in your HTML like so:

<div id="block-yui_3_17_2_2_1495044195108_28541" class="colorChange">

I also would recommend you two throttle your events, so that you do not listen to every scroll event, which could dramatically slow down your system, but every 50 seconds or so. Have a look at ScrollSpy or some jquery throtte plugin.

Answer 3

Your $(window).scroll is correct but i think your code lacks the proper setup to do what you want. Here is a working sample i made from your code to change the color of the background when the block div comes into view when scrolling.

https://codepen.io/Nasir_T/pen/jmvwEP

Hope this helps.

Answer 4

Using the scroll event you can calculate the offset of the h1 (or whatever element) which gets the current coordinates of the element. the wScroll variable gets the current vertical position of the scroll bar in this case the top of the window. On the condition you check if the scrollbar is greater or equal to the element you which to target and subtract that from the window height (if you wish to change the background once the element is on the screen change the 1.2 to 1) add a transition to the body for the animation. Check the demo scroll down. Sorry if its not well explained, excuse my writing.

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

if(wScroll >= $('h1').offset().top - ($(window).height() / 1.2 ) ){
  $("body").css("background-color", "black");
}else{
  $("body").css("background-color", "white");
}

});

body{
  transition: background-color 0.3s ease-in-out;
}
p{height: 1000px;}
h1{
height: 400px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hei">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.   </p>
  <h1>Change to Black</h1>
</div>