Dynamic background color fade when scrolling to certain ID on page

---

Hello dear laytheme forum,

I would like to create a dynamic background color change when scrolling on a certain element on my page.

https://timbieker.com/ashlynfw21

My projects start with a video section, followed by a stills section before landing on the footer on the bottom of the page.

I would like my site to dynamically change its background color from black to white once I scroll to the stills section.

Changing the background color of the elements in the row gutter is not an option as this would not change the complete background of the page.

Therefore I set a "white scroll" as # for the id of the desired elements/rows.

I would probably have to address this id in css and tell it to have a white background but for the whole page. Also it probably needs JS to be dynamic and respond to the scroll.

I searched online quite a lot but can only find super complex scroll effects with multiple colors, certain pixel scroll sizes, etc.

This is (I think) a more simple effect than what I can find online. Maybe its "as easy" as I think and someone can help.

http://jsfiddle.net/dtZDZ/

This already goes in this direction, but i can't make it work for my purpose.

Desired order and color:
black (video)
white (stills)
black (everything after stills: footer)

Thank you for helping!

Cheers,
Tim

This is maybe also quite close:

https://codepen.io/atomiks/pen/dgMNwG

As this is almost the last thing to do for my site I hope someone can help. My css ans js knowledge is too limited unfortunately.

Dear @Tim-B

This may be helpful:
https://stackoverflow.com/questions/59043899/jquery-change-background-color-when-div-reaches-a-certain-height

Best :)
Richard

Dear Richard,

thanks for the link.

I felt this might be the solution and I am almost there, but I couldn't make it work unfortunately.

I tried to give the "Stills" Row a css tag according to the instructions on the link and changed the namings accordingly.

I tried to google further and found this:
https://stackoverflow.com/questions/44032900/css-change-background-color-at-certain-point

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

I changed the ID to "stills" to name it with the stills gallery. And also I changed the $ to jQuery.

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="bgcontainer" class="colorChange">
  <div id="stills"></div>
</div>

CSS

.colorChange{
  height:2800px;
  background-color:black;
  transition: background-color 0.5s;
}
#stills{
  background-color:white;
  width:1px;
  height:1px;
  margin-top:1300px;
  display:inline-block;
}

JS

jQuery(window).scroll(function () {

jQuery('#bgcontainer').each(function () {

var topOfWindow = jQuery(window).scrollTop(),

bottomOfWindow = topOfWindow + jQuery(window).height();

var boxPos = jQuery('#stills').offset().top;

if(boxPos <= bottomOfWindow-100 && boxPos >= topOfWindow){
jQuery("#bgcontainer").css("background-color", "white"); 
}else{

jQuery("#bgcontainer").css("background-color", "black"); 

}

});

});

BUT this is not really doing what I wanted. It made the stills gallery disappear and it created empty spaces and so on.

I felt like this was by far the most promising one:

/* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { 
        //object comes into view (scrolling down)
        $(".sidebar").removeClass("clear-background");
        if(!$(".sidebar").hasClass("black-background)
           $(".sidebar").addClass("black-background"); // reset both
      } else { 
        //object goes out of view (scrolling up)
        $(".sidebar").removeClass("black-background");
        if(!$(".sidebar").hasClass("clear-background")) // reset both
          $(".sidebar").addClass("clear-background");
      }

This is one comment from the link you were sending. But I just can't make it work for my purposes...

The idea would be to set the stills gallery as a css ID and/or class and then create the js in a way that it gets toggled by this to change the background:

I am lost due to my limited understanding of css and js...but I feel so close to where I want to end..

Update:

following this: https://codepen.io/Nasir_T/pen/jmvwEP feels super close..

.colorChange{
  height:2800px;
  background-color:black;
  transition: background-color 0.5s;
}
#block{
  background-color:black;
  width:1px;
  height:1px;
  margin-top:1300px;
  display:overflow-block;
}

jQuery(window).scroll(function () {

jQuery('#bgcontainer').each(function () {

var topOfWindow = jQuery(window).scrollTop(),

bottomOfWindow = topOfWindow + jQuery(window).height();

var boxPos = jQuery('#block').offset().top;

if(boxPos <= bottomOfWindow-100 && boxPos >= topOfWindow){
jQuery("#bgcontainer").css("background-color", "white"); 
}else{

jQuery("#bgcontainer").css("background-color", "black"); 

}

});

});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="bgcontainer" class="colorChange">
  <div id="block"></div>
</div>

When adding this html into the custom html at top section it at least works to show the desired effect. BUT it gets applied to the top of every page before then showing the normal part of the page..

How could I make it triggered by the stills carousels using the custom classes and ids? Adding the html to the pages separately creates big gaps rather than being added in the background...

Hope this is an easy thing for anyone who understands css and js better than me..

cheers!

Hi @Richard,

I know there are a lot of questions here and this also might be too specific, but maybe this topic just got crowded by other postings. So I hope you might have an answer to this for me. As I said before I have the feeling that I am already super close but just didn't see a mistake I did or so.

Maybe also @mariusjopen or @arminunruh know if there is a fairly easy fix for this.

This is the last thing missing for my project. Thanks for building and also updating lay theme as well as providing so much help here. Have a nice week!

Cheers