how to make hide/show when scroll down work on Safari?

[ta_io]

This property of jQuery, it does not work well in Safari any one knows an appropriate solution to hide and show my header when I scroll down

https://codepen.io/ta_io/pen/QRgEJw

$(window).scroll(function() {
$(‘.header’).stop(true, true).hide().fadeIn(‘slow’);
});

[Shikkediel]

Don’t know what the exact issue is because I can’t check on Safari but the code could be improved with a condition and a debounce, which might also incidentally solve what was going on.

var item = $('.header'), show;

$(window).scroll(function() {

  if (item.is(':visible')) item.stop(true, true).hide();

  clearTimeout(show);

  show = setTimeout(function() {
    item.fadeIn('slow');
  }, 150);
});

codepen.io/rgERVN

[Shikkediel]

The page jumps by the way but that is an issue on all browsers, related to removing the element from document flow.

[Shikkediel]

Actually, I was wrong there. Fixed position wouldn’t cause a page jump here. No clue what I was seeing before.

[ta_io]

Hello Shikkediel !

Thank you very much for your help, I have solved the problem with the Safari but it triggers another problem related to my collapsible nav, I need to remove the .header class from javascript so that it does not affect. I try to put this item = $ (‘.logo .nav-wrapper’), show; but it does not work, as I could put several classes to exclude the one I have.

[Shikkediel]

That doesn’t work because .nav-wrapper isn’t a child of .logo… if you’re trying to target the links only then just use var item = $('.nav-wrapper').

[Author]

Posts