Apologies if this is a repeat question. I've scanned the internet but haven't found a viable solution to this. My website has varying background colours, blue and white. My nav's copy is primarily set to white but I'd like it to change to black when over a div with a white background.
Initially, I found this bit of JS on here:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.desktop-menu').offset().top;
var menuHeight = $('.desktop-menu').height();
var menuPos = $('.logo').offset().top;
var menuHeight = $('.logo').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.desktop-menu').addClass('menu-secondary');
$('.desktop-menu').removeClass('menu-primary');
}
else {
$('.desktop-menu').removeClass('menu-secondary');
$('.desktop-menu').addClass('menu-primary');
}
})
})
But this seems to not work beyond 3 containers. If I continue scrolling to other divs, no matter what id I attach to a div (#light or #dark), the text stops changing after the first 3 div containers on a page.
Thanks to anyone who can help!
EDIT: Struggled to get codepen to work so here's an example below.
Example HTML:
<div class="container">
<header>
<nav>
<ul class="menu">
<li><a href="#" class="menu-btn light-color">Page 1</a></li>
<li><a href="#" class="menu-btn light-color">Page 2</a></li>
<li><a href="#" class="menu-btn light-color">Page 3</a></li>
</ul>
</nav>
</header>
<div class="hero-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
</div>
Example CSS:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
Example JS:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.menu-btn').offset().top;
var menuHeight = $('.menu-btn').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.menu-btn').addClass('dark-color');
$('.menu-btn').removeClass('light-color');
}
else {
$('.menu-btn').removeClass('dark-color');
$('.menu-btn').addClass('light-color');
}
})
})
Ok, I had to change a bit your code because you were checking on ids (you shouldn't have multiple elements with the same ID),
This should be ok for your case, so basically i create an array of light-sections and then check if scroll position is inside one of them
var $ = jQuery;
$(document).ready(function () {
var lightPos = [];
$(".light-background").each(function () {
lightPos.push({
start: $(this).offset().top,
end: $(this).offset().top + $(this).height()
});
});
$(window).scroll(function () {
var menuPos = $(".menu-btn").offset().top;
var isInLight = !!lightPos.some((light) => {
return light.start < menuPos && light.end > menuPos;
});
if (isInLight) {
$(".menu-btn").addClass("dark-color");
$(".menu-btn").removeClass("light-color");
} else {
$(".menu-btn").removeClass("dark-color");
$(".menu-btn").addClass("light-color");
}
});
});body {
margin: 0;
font-family: "Poppins", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<header>
<nav>
<ul class="menu">
<li><a href="#" class="menu-btn light-color">Page 1</a></li>
<li><a href="#" class="menu-btn light-color">Page 2</a></li>
<li><a href="#" class="menu-btn light-color">Page 3</a></li>
</ul>
</nav>
</header>
<div class="hero-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
</div>