Safari中的固定/靜態不對齊元素之間的滾動切換

Question

乾杯！

我有一個<header> - 當窗口尺寸太小而不能顯示圖像和下面的標題時，我保留position: fixed;的元素。當滾動圖像時，header應該正常顯示在圖像下方，因此設置position: static。

請參閱本演示： http://experience.sap.com/designservices/work/see-how-design-services-transformed-shell

我用一個簡單的jQuery腳本：

function fixedBar() { 
    if ($('#h1').length > 0) { 
     var offsetTitle = $('#h1').outerHeight(); 
     var endImage = $('span.featured-img').offset().top + $('span.featured-img').outerHeight(); 
     if ($(window).height() + $(window).scrollTop() < endImage + offsetTitle) { 
        $('#h1').addClass('sticky-bottom'); 
     } 
     else { 
      $('#h1').removeClass('sticky-bottom'); 
     } 
    } 
} 
$(window).on('scroll resize', fixedBar); 

隨着.sticky底

position: fixed; 
bottom: 0; 

這可以在Chrome中正常工作，但是在Safari中，<header>在滾動速度過快時呈現錯誤的位置。

您可能必須調整窗口大小（垂直），直到<header>固定在底部。如果您以極快的​​速度滾動（使用觸控板）並緩慢向上滾動，則<header>（偶爾會）會顯示在摘要文本的頂部，而不是直接與頂部圖像相鄰。

有關如何解決此問題的任何想法？它肯定會受到視頻和旋轉木馬的影響，因爲如果沒有這些元素，問題就不會持續。我試圖用「<header> -Element」上的-webkit-transform: translateZ(0);「激活」硬件加速，但沒有成功。

感謝您的幫助！

Henning

Answer 1

我有這個完全相同的問題，是超級沮喪的。我在StackExchange上看到了其他地方（抱歉找不到URL），滾動事件與鼠標滾輪不同步。

嘗試：

$window.on('scroll resize mousewheel', fixedBar); 

問題解決了我。