Docs

[c1s]

Hi,
I already found a nice code which adds a shadow to the navbar only when scrolled:

CSS:

.x-navbar.shadow {
   -webkit-box-shadow: 0px 3px 5px -2px #6b6b6b;
   -moz-box-shadow: 0px 3px 5px -2px #6b6b6b;
   box-shadow: 0px 3px 5px -2px #6b6b6b;
}

JQUERY:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,1.0");
	$( '.x-navbar' ).addClass( 'shadow' );
} else {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.0");
	$( '.x-navbar' ).removeClass( 'shadow' );
}
});
});

I would like to refine that code now, so that the navbar shadow appears only at that point of scrolling down, when the navbar has reached the top of the page.

Thanks for your help!!!

[c1s]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue, refining the shadow of the navbar, please have the JS code updated and make use of this code instead:

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,1.0");
	$( '.x-navbar' ).addClass( 'shadow' );
    } else {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.0");
	$( '.x-navbar' ).removeClass( 'shadow' );
    }
  });
});

I just change the > 0 to > 200. This is the position of the navbar as soon as you scroll the page.

We would loved to know if this has work for you. Thank you.

[c1s]

That has worked perfectly!!! Thanks very much!! 🙂

[Rue Nel]

Hello There,

You’re welcome! Thanks for letting us know that it has worked for you.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Author]

Posts