通过滚动调整容器位置

Question

我试图使它成为一个div容器中的一组元素不断存在于视口中。我尝试了几种不同的方法，但它们似乎重新粉刷了问题。

问题：为提高效果和消除突出的视觉副作用而进行的任何重大优化？如果没有，那么任何替代方法？

第一种方法：

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

这会产生微小的震动效果，这对用户来说是显而易见的。

第二种方法：

• 在内容的下方和上方放置一个div，缩小并展开它们，并使用一些基本的数学运算来填充可滚动容器的未使用空间。

这种方法的问题在于它会导致内容边缘的闪烁，这很可能是由于不断调整大小。

第三种方法：

• 将一个模仿滚动行为的div直接放在原始滚动条所在的位置，然后简单地将滚动事件绑定到它，然后将它们转发到实际容器。

这个问题是因为实际执行滚动的div是假的，鼠标滚轮将无法使用，因为当将鼠标悬停在视口中的元素上时它不会有焦点。

有关改进或替代方法的任何想法？它必须以性能为中心。

Answer 1

你不需要JavaScript，你可以使用CSS。例如：

#viewport { 
    position: relative;
}

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

David Walsh有demo page position: fixed在行动。