FadeOut函數移動問題

我正在使用jQuery的函數來隱藏我的標題。FadeOut函數移動問題

它按照我喜歡的方式工作，但它在移動設備上存在問題。
問題是：fadeOut不會緩慢地隱藏元素，並且該函數將整個頁面移動20-30個像素。

這是函數：

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

任何想法如何解決呢？

謝謝！

來源

2017-06-16 Haris Papadakis

我認爲值'50'應該是一個變量。換句話說，嘗試使用「50」以外的值並使用移動設備進行測試。 – SaidbakR

這是修復程序。我只是把腳本中的媒體查詢

// 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(); 
    } 
    }); 
    } 
};

來源

2017-06-17 14:08:30

您正在設置每次滾動更改時的淡入淡出轉換，即滾動時每秒多次。只有在停止滾動後才允許淡入淡出：

$(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); 
});

來源

2017-06-16 23:35:40

這個問題沒有解決 –

@Haris。很公平。但滾動事件超時仍然可以應用。你在回答媒體查詢時所做的與問題中的相同，但只有當窗口寬度小於64em時。如果你把瀏覽器的窗口縮小到這個寬度以下，它什麼都不會做。 –

該問題僅在移動設備上出現。其他設備正常工作。所以我使用媒體查詢來啓用fadeOut功能，僅適用於1024像素或更高的設備。現在正在工作。 –

FadeOut函數移動問題

回答

相關問題