Custom JS/CSS issue

Support
#1

Hello,

I use the command below so that the top of the page is all white and only when scrolling appears a “box-shadow” line at the bottom. It worked fine, but when the page loads, this “box-shadow” appears for 1 second and then disappears until it scrolls. Would you correct the code so this does not happen?

Site: cloudrock.com.br/revenda-de-hospedagem

CSS

.x-navbar.mi-static-top {
  box-shadow: none;
}
.x-navbar {
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,.12);
}

JS

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

  var $win = $(window),
      $navbar = $('.x-navbar');
  function staticNavbarOnTop() {
    if ( $win.scrollTop() < 50 ) {
      $navbar.addClass('mi-static-top');
    } else {
      $navbar.removeClass('mi-static-top');
    }
  }

  staticNavbarOnTop();
  $win.scroll( staticNavbarOnTop );

});
#2

Hi @andersonosn,

Thanks for a very detailed information. Your code is working perfectly. It’s just that the shadow is not noticeable because of its opacity. Please have the css code updated and increase the opacity:

.x-navbar.mi-static-top {
  box-shadow: none;
}

.x-navbar {
  box-shadow: 0px 2px 6px 0px rgba(0,0,0, 0.65);
}

Please let us know how it goes.

#3

Hello,

I think you did not understand. And I do not speak English very well, sorry!

I’ll try to explain it better.

The CSS / JS that I’m using on the site is so that the line at the bottom of the navbar appears only when scrolling down. This is working, to scroll the line appears, however, with the page open at the top (without scroll down), press F5 in your browser and look at the navbar, you will see that even at the top of the page where the line does not should appear, it appears for 1 second and disappears. Whenever the page loads or the site visitor goes to other pages this happens.

Watch in the video that I put on Youtube temporarily: Stay watching the video, the moment I press F5 (00: 12s) you will see the line appearing and disappearing for a short time.

Could you help me figure it out?

Thank you.

#4

Hi @andersonosn,

Thank you for the video recording, I was able to replicate the issue on my end. To fix the issue, please replace you JS code with the following code:

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

  var $win = $(window),
      $navbar = $('.x-navbar');
  function staticNavbarOnTop() {
    if ( $win.scrollTop() > 50 ) {
      $navbar.addClass('mi-static-top');
    } else {
      $navbar.removeClass('mi-static-top');
    }
  }

  staticNavbarOnTop();
  $win.scroll( staticNavbarOnTop );

});

Then replace your CSS with the following one:

.x-navbar {
    box-shadow: none !important;
}
.mi-static-top {
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,.12) !important;
}

This should fix the issue, Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

You are amazing!
I’ve never seen a company provide support like you do. They deserve success!

Thank you from the heart.

#6

Glad we could always help and you’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.