FadeOut関数モバイルの問題

Question

私はヘッダを隠すためにjQueryの関数を使用しています。

私の好きなように機能していますが、モバイルデバイスに問題があります。
問題は、fadeOutは要素をゆっくりと隠しておらず、関数はページ全体を20〜30ピクセル上に移動しています。

これは、関数である：

$(window).scroll(function() { 
    if ($(this).scrollTop()>50) { 
    $('.c-header').fadeOut(); 
    } else { 
    $('.c-header').fadeIn(); 
    } 
}); 

任意のアイデアそれを修正する方法？

ありがとうございます！

Answer 1

これは修正です。私はちょうどスクリプトにメディアクエリを入れます。

// media query event handler 
if (matchMedia) { 
    var mq = window.matchMedia("(min-width: 64em)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change  window width is at least 64em 
function WidthChange(mq) { 
    if (mq.matches) { 
    $(window).scroll(function() { 
    if ($(this).scrollTop()>50)  { 
     $('.c-header').fadeOut(); 
    } else  { 
     $('.c-header').fadeIn(); 
    } 
    }); 
    } 
}; 

Answer 2

スクロールの変更ごとにフェードトランジションを設定しています。スクロールしている間は、1秒間に何回もフェードトランジションが設定されています。フェードトランジションは、スクロールを停止した後にのみ許可してください。

$(window).scroll(function() { 
    var me = $(this); 
    var header = $('.c-header'); 
    var height = 50; // Might as well be header.outerHeight() 
    clearTimeout(window.headerScrollTimeoutId||0); 
    window.headerScrollTimeoutId = setTimeout(function() { 
    if (me.scrollTop() > height) { 
     header.fadeOut(); 
    } else { 
     header.fadeIn(); 
    } 
    }, 1); 
});