adjusting container position with scrolling

Question

I am attempting to make it so that a set of elements in a div container constantly are present in the a Viewport. I have tried a couple of different approaches but they seem to have repainting issues.

Question: Any major optimizations to improve performance and remove the visual side effects that stand out? If not, then any alternative approaches?

First approach:

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

This one causes tiny shaking effects that are obvious to the user.

Second approach:

• Place a div below and above the contents, shrink and expand them with a little rudimentary math to fill the unused space of the scrollable container.

Issue with this approach was that it causes flickering at the edges of the content most likely due to the constant resizing.

Third approach:

• Place a div that mimics the scrolling behavior directly over where the original scrollbar would be then simple bind scrolling events to it that forwards them to the actual container.

Issue with this one is that since the div that actually performs the scrolling is a fake, the mouse wheel wouldn't be usable since it would not have focus when hovering over the elements in the viewport.

Any thoughts on improvements or alternate approaches? It has to be performance-centric.

Answer 1

You don't need JavaScript for this, you can do it with CSS. For example:

#viewport { 
    position: relative;
}

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

David Walsh has a demo page of position: fixed in action.