Change class on scroll

Change class on scroll

First you need to make sure that JQuery is active – best to call the most recent script if you can

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> 

then you something more specific – here you are changing the class of an element from “.classinitial” to “classfinal” when the user scrolls down 50px

<!--https://www.geeksforgeeks.org/how-to-change-style-of-elements-on-scroll-using-jquery/-->
<script>
$(function() {
    var header = $(".classinitial");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 50) {
            header.removeClass('classinitial').addClass("classfinal");
        } else {
            header.removeClass("classfinal").addClass('classinitial');
        }
    });
});

</script>

Then in your markup …

<div class="classinitial">
			
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="landing-site-name"><?php bloginfo( 'name' ); ?> </h1>
</a>
						
</div> <!-- ends full top classinitial->

… and finally some CSS

.classinitial{width:100%; position:fixed; z-index:999;background-color:transparent;transition:background-color 0.5s ease;}
.classfinal{width:100%; position:fixed; z-index:999;background-color:#443171;transition: background-color 0.5s ease;}