Straightforward method to change the header color and logo on scroll with Elementor Free. Follow the video tutorial and copy-paste the code below, and in few minutes you will have your changing header. This technique doesn’t require any addition plugin, since it uses only the free version of Elementor.
Video tutorial on how to change the header color or logo on scroll with Elementor
Play Video
The code you need to copy-paste for your header color and logo to change on scroll
Don’t forget to add the two CSS classes in the first header section, the header that is going to be sticky. The CSS classes: “headerSection hiddenHeader”.
Please follow the video tutorial to correctly implement the changing header on scroll.
<style>
.hiddenHeader {
display: none;
}
.stickyHeader{
position: fixed;
width: 100%;
top: 0;
}
.headerSection.stickyHeader{
background-color: rgba(255, 255, 255, 1)!important;
border-bottom: 1px solid #EEE;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".hiddenHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.removeClass('hiddenHeader').addClass("stickyHeader");
} else {
header.removeClass("stickyHeader").addClass('hiddenHeader');
}
});
});
</script>
