I'm currently working on a project where the logo color should change depending on the background color. I would prefer to do this with CSS classes.
Unfortunately, the problem is: As soon as the first DIV of the class "bg02" is scrolled, the class changes for the logo too, but as soon as the following "bg02" divs are scrolled, nothing happens anymore. What am I doing wrong? Can you help me?
Here's my code:
JavaScript
$(document).on("scroll", function() {
var scrollPos = $(document).scrollTop();
$('#logo').each(function() {
var currDiv = $(this);
var refElement = $('.bg02');
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#logo').removeClass("inverted");
currDiv.addClass("inverted");
} else {
currDiv.removeClass("inverted");
}
});
});
CSS
#logo {
position: fixed;
top: 20px;
left: 5%;
z-index: 100;
font-size: 26px;
font-weight: 700;
color: #000;
}
#logo.inverted {
color: #fff;
}
.bg01, .bg02 {
position: relative;
width: 100%;
height: 600px;
}
.bg01 {
background: #fff;
}
.bg02 {
background: #000;
}
HTML
<div id="logo">Logo</div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
Your issue is that $('.bg02').position() can only return a single position, so it returns the position for the first one.
To use your method of checking scrollTop(), you need to loop .bg02 not #logo
Couple of small changes to your code:
Loop .bg02:
$('.bg02').each(function() {
var refElement = $(this);
and a "break" inside the if - return false to stop the loop continuing and removing the inverted class for the later .bg02 that doesn't match
if (positioncheck) {
$("#logo").addClass("inverted");
return false;
}
You can also "tweak" when the logo gets inverted by considering its position, eg:
var scrollPos = $(document).scrollTop()
+ $("#logo").position().top
+ ($("#logo").height() / 2)
as it was, it would only invert when bg02 got to the top.
Updated snippet:
$(document).on("scroll", function() {
var scrollPos = $(document).scrollTop()
+ $("#logo").position().top
+ ($("#logo").height() / 2)
$('.bg02').each(function() {
var refElement = $(this);
if (refElement.position().top <= scrollPos
&& refElement.position().top + refElement.height() > scrollPos) {
$('#logo').addClass("inverted");
// found one, so exit .each
return false;
} else {
$('#logo').removeClass("inverted");
}
});
});#logo {
position: fixed;
top: 20px;
left: 5%;
z-index: 100;
font-size: 26px;
font-weight: 700;
color: #000;
}
#logo.inverted {
color: #fff;
}
.bg01, .bg02 {
position: relative;
width: 100%;
height: 200px;
}
.bg01 {
background: #fff;
}
.bg02 {
background: #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo">Logo</div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg01"></div>
<div class="bg02"></div>