粘滯導航滯後滾動

這是我工作的網站：Click here - Home Page Scroll Issue。我使用基金會5，粘性和滾動條傳送帶貓頭鷹粘滯導航滯後滾動

（我用油滑的旋轉木馬嘗試，結果是一樣的）。

我遇到的問題是，每當我翻/下，頂欄越過旋轉木馬，整個頁面口吃和滾動碰撞和停止比其預期的軌跡更短。

我已經嘗試了很多解決方案，包括將z-index和-webkit-transform: translateZ(0)規則應用於旋轉木馬沒有成功。

這個問題似乎並不在Firefox或邊緣存在，或至少是不那麼明顯。

任何想法？

**更新，Ajay Varghese's答案似乎幫助向下滾動，但滾動起來的時候問題仍然存在。當複製下一個內容行以增加頁面的長度時，如果您嘗試向上滾動以顯示轉盤，它會跳轉並創建滾動拼寫。這個問題很煩人，我似乎還找不到原因。

來源

2016-04-10 Barzev

此問題僅在Chrome中存在。這個問題似乎是WebKit有時不能很好地處理分層。

這裏是一個完全爲我工作的解決方案： body { -webkit-transform: translate3d(0, 0, 0);}

希望這可以幫助別人，並節省寶貴的時間。

**更新，我並沒有意識到，這打破了粘頂欄。因此，這種解決方案是不可行的。

來源

2016-04-20 08:26:29 Barzev

試圖通過.fixed類中添加overflow: hidden;

.fixed { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 99; 
    overflow: hidden; 
    left: 0; 
}

來源

2016-04-11 09:40:38

在Chrome開發者工具中試過，它沒有產生任何區別。 – Barzev

我不明白這個問題究竟是如何發生的。但我嘗試了一些東西並解決了問題。在我刪除了您給出的'margin-top'.main-content之後，跳轉不會發生。這將使轉盤保持在我們不想要的.main-content框中。我通過給予一些額外的高度來解決它，並通過給予'位置：相對'和'頂部：15px'來推動旋轉木馬。你可以試試這個，讓我知道嗎？

來源

2016-04-11 10:58:26

謝謝你，但它並沒有太多的工作。我嘗試以下如你所說 '。主要內容{ 邊距：0 }'和也'.owl傳送帶{ 位置：相對; top：15px; }' – Barzev

這可能似乎將問題解決在更大的屏幕上，因爲滾動會變得更短，但是如果您在開發人員工具中複製下面的行，則會看到滾動滾動條仍然會產生滾動凹凸。 – Barzev

我剛剛刪除了邊緣頂部，它似乎工作。我嘗試在Chrome，Ubuntu的操作系統。在MAC測試也。在那裏我沒有改變任何東西，但沒有得到解決。 –

粘滯導航滯後滾動

回答

相關問題