Skip to main content

Forums

This topic contains 5 replies, has 2 voices, and was last updated by  Shikkediel 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #289024

    ta_io
    Participant

    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’);
    });

    #289025

    Shikkediel
    Participant

    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

    #289026

    Shikkediel
    Participant

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

    #289059

    Shikkediel
    Participant

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

    #292102

    ta_io
    Participant

    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.

    #292103

    Shikkediel
    Participant

    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').

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star