在IE瀏覽器中增加jquery滾動頻率

我有一個表頭，滾動100px後必須粘到頂部（表格上方有一個邊距）。我所做的是將其位置設置爲absolute並使用$(document).scrollTop()計算出合適的top值，然後用$(document).scroll(function() {...}更新其位置。 Firefox和Chrome瀏覽器中的所有內容都非常流暢，但IE瀏覽器並不支持。在IE中，標題的滾動根本不流暢。在IE瀏覽器中增加jquery滾動頻率

我做了一個試驗，其中我印刷的(document).scrollTop()值，注意到的是，雖然Firefox和Chrome觸發滾動事件每幾個像素，IE觸發它每一次輪運動，我是否滾動5個像素或500

有沒有一些方法來增加IE中滾動事件的更新頻率？

我已經嘗試過：

頭位置設置爲固定的，而不是絕對的幫助，但該表是非常大的，那麼問題將被轉移到水平滾動。
長時間使用CSS動畫看起來很奇怪，有點煩人;短暫的延遲並沒有幫助，問題依然存在。
使用setInterval每100ms更新標題位置。這在瀏覽器上太重了，甚至無法工作。結果在IE中保持不變，因爲滾動值保持不變直到運動結束。

注意：我只針對IE11。

編輯：http://jsfiddle.net/5fv5q5fy/2/我剛剛編譯這個小提琴讓你試試。我很感激任何幫助，但請記住，如果不打破我的網站的其他部分，這已經在互動元素中已經相當沉重，我無法改變一切。

來源

2014-10-20 ecc

我不明白爲什麼我被低估了。我能以某種方式改進我的問題嗎？ – ecc 2014-10-20 12:09:34

http://codereview.stackexchange.com/questions/19610/improve-jquery-parallax-site-on-scroll – 2014-10-20 12:24:44

很難說，如果我們沒有小提琴玩 – 2014-10-20 12:29:06

我不認爲你可以改變任何Internet Explorer的工作原理。確實，IE的行爲非常糟糕。你應該做的，是用fixed positionning使用這個簡單的解決方法：

jsFiddle demo

if (scrollTop > 20) { 
    // Stays fixed on top 
    $("thead").css({ 
     position: 'fixed', 
     top: 0 
    }).closest('table').addClass('scrolling'); 

} else { 
    // Moves with scroll 
    $("thead").css({ 
     position: 'static', 
     top: 'auto' 
    }).closest('table').removeClass('scrolling'); 
}

然後你就可以刪除這個CSS：

thead { 
    position: absolute; 
    top: 10px; 
}

並添加以下之一：

table.scrolling { 
    margin-top: 50px; 
}

編輯：

對於更復雜的整合，你可能想看看這個現成的插件，測試，工作正常使用Internet Explorer：
StickyTableHeaders

來源

2014-10-20 15:45:52 Brewal

感謝您的回答，但如果出現水平滾動，固定位置不會解決問題。我將不得不手動滾動scrollLeft。：/也許如果我檢測到滾動的方向，我可以將其從絕對修改爲固定，但這是一個矯枉過正的問題，我認爲我只能忍受這一點。例如：http://jsfiddle.net/spysr6dp/1/ – ecc 2014-10-20 15:51:19

那麼，也許你應該使用這個插件然後：[StickyTableHeaders]（https://github.com/jmosbech/StickyTableHeaders）。我已經測試了IE下的演示，它工作得很好 – Brewal 2014-10-20 16:03:30

非常漂亮的插件！謝謝Brewal。發佈這個答案，我可以接受。我會嘗試將其整合到我的應用程序中，並祈禱它不會破壞其他所有內容。 – ecc 2014-10-20 16:20:11

在IE瀏覽器中增加jquery滾動頻率

回答

相關問題