How to change the text color where part of the background is white or black
Rex Hope
How can I change the color of the menu if the menu scrolls past the background: black, the menu text should be white, or if the background is white, the menu text should be black.
HTML
<div class="fixed-side-navbar">
<ul class="nav">
<li><a href="#example-one"><span>Example One</span></a></li>
<li><a href="#example-two"><span>Example Two</span></a></li>
<li><a href="#example-three"><span>Example Three</span></a></li>
<li><a href="#example-four"><span>Example Four</span></a></li>
<li><a href="#example-five"><span>Example Five</span></a></li>
<li><a href="#example-six"><span>Example Six</span></a></li>
</ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>
CSS：
.example-one {
background: black;
}
.example-two {
background: black;
}
.example-three { background: white }
.example-four { background: black }
.example-five { background: white; }
.example-six { background: black; }
User 7207170
Here is a demo using Jquery.
- Use variables to store the scroll position , and the offset of the element from the top where you want the color to change, element1 and element2 in this example.
- When using scrolling documents, check the offset from the top of the scroll to the offset of the top position of the element
$(document).scroll(function()). - Apply appropriate CSS colors or styles to elements based on conditional statements .
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
var element1 = $('#backgrund2').offset().top;
var element2 = $('#backgrund3').offset().top;
if (scroll_pos < element2 && scroll_pos > element1) {
$(".fixed-side-navbar a").css('color', 'black');
} else {
$(".fixed-side-navbar a").css('color', 'white');
}
});
});body {
height: 2000px;
width: 100%;
}
.fixed-side-navbar {
position: fixed;
top: 0;
left: 0;
}
.fixed-side-navbar a {
text-decoration: none;
color: white;
}
#backgrund1,
#backgrund2,
#backgrund3 {
width: 100%;
background: black;
height: 700px;
}
#backgrund2 {
background: white;
}
#backgrund3 {
background: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
<ul class="nav">
<li><a href="#background1"><span>Intro</span></a></li>
<li><a href="#background2"><span>MSQ</span></a></li>
<li><a href="#background3"><span>ICM</span></a></li>
<li><a href="#sec2"><span>Section two</span></a></li>
<li><a href="#sec3"><span>Section three</span></a></li>
<li><a href="#sec4"><span>Section four</span></a></li>
</ul>
</div>
<div id="backgrund1"></div>
<div id="backgrund2"></div>
<div id="backgrund3"></div>renew:
$(document).ready(function() {
var scroll_pos = 0;
var $window = 7*$(window).height()/10; //Since, top=70%
$(document).scroll(function() {
scroll_pos = $(this).scrollTop()+$window;
var element1 = $('#example-one').offset().top;
var element2 = $('#example-two').offset().top;
var element3 = $('#example-three').offset().top;
var element4 = $('#example-four').offset().top;
var element5 = $('#example-five').offset().top;
var element6 = $('#example-six').offset().top;
if ((scroll_pos >= element3 && scroll_pos < element4) || (scroll_pos >= element5 && scroll_pos < element6)) {
$(".fixed-side-navbar a").css('color', 'black');
} else {
$(".fixed-side-navbar a").css('color', 'white');
}
});
});.fixed-side-navbar {
position: fixed;
top: 70%;
left: 0;
}
.fixed-side-navbar a {
text-decoration: none;
color: white;
}
#example-one {
background: black;
height: 700px;
width: 100%;
}
#example-two {
background: black;
height: 700px;
width: 100%;
}
#example-three {
background: white;
height: 700px;
width: 100%;
}
#example-four {
background: black;
height: 700px;
width: 100%;
}
#example-five {
background: white;
height: 700px;
width: 100%;
}
#example-six {
background: black;
height: 700px;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
<ul class="nav">
<li><a href="#example-one"><span>Example One</span></a></li>
<li><a href="#example-two"><span>Example Two</span></a></li>
<li><a href="#example-three"><span>Example Three</span></a></li>
<li><a href="#example-four"><span>Example Four</span></a></li>
<li><a href="#example-five"><span>Example Five</span></a></li>
<li><a href="#example-six"><span>Example Six</span></a></li>
</ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>