用滾動調整容器位置

Question

我正在嘗試使它在div容器中的一組元素始終存在於視口中。我嘗試了幾種不同的方法，但他們似乎有重新繪製問題。

問題：任何主要的優化，以提高性能和消除突出的視覺副作用？如果不是，那麼還有其他方法嗎？

第一種方法：

$(viewport).scroll(function() 
    { 
     m_grid.css({ 'marginTop': viewport.scrollTop() + 'px' }); 
    }) 

這一個小小的引起震動效應是顯而易見的用戶。

第二種方法：

• 廣場下方，上面的內容股利，縮小和擴大他們一點點基本的數學填補滾動容器的未使用空間。

這種方法的問題在於，它會導致內容邊緣閃爍，很可能是由於不斷調整大小。

第三種方法：

• 將直接在這裏原來的滾動條會那麼簡單綁定滾動事件它，並將其轉發到實際的容器模仿滾動行爲股利。

問題在於，由於實際執行滾動的div是假的，鼠標滾輪將不可用，因爲它在鼠標懸停在視口中的元素上時沒有焦點。

有關改進或替代方法的任何想法？它必須以性能爲中心。

Answer 1

你不需要JavaScript就能做到這一點，你可以用CSS來做到這一點。例如：

#viewport { 
    position: relative; 
} 

#m_grid { 
    position: fixed; 
    top: 0px; 
} 

大衛·沃爾什已經在行動position: fixed一個demo page。