Skip to main content

Forums

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

Viewing 4 posts - 1 through 4 (of 4 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

    $(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.

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

You must be logged in to reply to this topic.

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