On scroll change Navbar background color

[alriteam]

Hello,

I have been struggling with below JQuery for add the Navbar background color on scroll, by default or on Scroll on top it should be transparent.

jQuery(document).ready(function($) {

 $('.x-navbar-fixed-top').css("background-color", "#fffddf"); 
  
  if ($( this ).scrollTop() > 200) { 
    
    $('.x-navbar-fixed-top').css("background-color", "#CCCCCC").css("transition","0.3s ease-in-out "); 
  } 

});

[Prasant]

Hello @alriteam,

Thanks for asking.

Please use following CSS and JS code.

• Add following JS code under X > Theme Options > JS:

jQuery(function($) {
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if(scroll ==0){
       $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
});
});

• After that add following CSS under X > Theme Options > CSS:

@media (min-width: 979px) {
.x-navbar.x-navbar-fixed-top {
     background: #2c3e50 !important;
}
}

Please change background color #2c3e50 as per your requirement.

Thanks.