We needed to build a method to change css color on scroll
Scroll down to see the color change
This line and the title above are going to change colour.
The code below target a class that is rapped around the 2 blocks of words.
<style>
.content {
color: black; /* Initial color */
transition: color 0.3s ease; /* Smooth transition */
}
</style>
<div class=”content”>
<h1>Scroll down to see the color change</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec libero quis nisl porttitor eleifend. Ut nec risus malesuada, fringilla nulla eget, porta velit.</p>
</div>
<script>
window.addEventListener(‘scroll’, function() {
var content = document.querySelector(‘.content’);
var scrollPosition = window.scrollY;
// Change color based on scroll position
if (scrollPosition > 100) {
content.style.color = ‘blue’;
} else {
content.style.color = ‘black’;
}
});
</script>
Change color of Elementor Hamburger Menu
Maybe you need to change the color of the hamburger menu, especially if you’re using a transparent background on the web page.
<style>
.e-eicon-menu-bar { /* height: 3000px; Just for demonstration, to create enough scrollable area */
fill: red; /* Initial color */
transition: color 0.3s ease; /* Smooth transition */
}
</style>
<script>
window.addEventListener(‘scroll’, function() {
var eeiconmenubar = document.querySelector(‘.e-eicon-menu-bar’);
var scrollPosition = window.scrollY;
// Change color based on scroll position
if (scrollPosition > 100) {
eeiconmenubar.style.fill = ‘blue’;
} else {
eeiconmenubar.style.fill = ‘green’;
}
});
</script>
Sign up for a Consultation
Changing the color of SVG icons
This block of code can target an svg icon on the page using the class .star
<style>
.star { /* height: 3000px; Just for demonstration, to create enough scrollable area */
fill: red; /* Initial color */
transition: color 0.3s ease; /* Smooth transition */
}
</style>
<script>
window.addEventListener(‘scroll’, function() {
var star = document.querySelector(‘.star’);
var scrollPosition = window.scrollY;
// Change color based on scroll position
if (scrollPosition > 100) {
star.style.fill = ‘blue’;
} else {
star.style.fill = ‘green’;
}
});
</script>