Change css as you scroll a page

Scroll Down Icon Png 3

Hide and Show onClick in Elementor

Add Your Heading Text Here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. now hide Lorem ipsum dolor sit amet,

Oip

Add a vcard on button click in elementor

This is how you can create a vcard on a button click If you’re directing people to a page by QR code from a phone, it can be useful for

Change css on scroll

Scroll Down Icon Png 3

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

If you would like to discuss your eCommerce website then we can offer a 30 minute consultation for FREE

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>

let’s have a chat!

Just click on the button below and book a FREE 30 minute conversation regards your project.

Waiting To Hear From You Regarding Your Web Design Services
Waiting To Hear From You Regarding Your Web Design Services

get in touch

Or