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..