Question

I’m looking for a solution to keep an element in view, while scrolling the rest of the page.

I don’t want to re-invent the wheel so i’m reaching out to see if the community knows of a canned solution already.

I want to apply this to a huge table that I have, and I would like users to be able to continue seeing the table headers as they scroll down.

Just to clarify, what I’m looking for is different from a scrollable table with overflow CSS settings. The reason I can’t use a scrollable table is because that method becomes very slow with thousands of rows. Also that method does not work well on the iPhone browser.

Ideally I would like it so that when the user scrolls the page down the table’s header would ‘stick’ at the top edge of the browser’s view. Inversely if the user scrolls back up it would continue to stick there until it arrives back at the original position the header started from.

Answer 1

Are you looking for the #element { position: fixed; ... }? You can switch between fixed, relative and absolute using JS.

http://www.w3schools.com/cssref/pr_class_position.asp

Edit

Take a look at how they do it on [I hope they don’t mind] http://www.zocdoc.com/search.aspx?dr_specialty=98&address=Enter+a+City+and+State%2C+or+Zip&insurance_carrier=-1&insurance_plan=-1&button.x=166&button.y=21

They use jQuery, it doesn’t seem complicated and they also has an IE6 workaround

$(function() {
    var msie6 = $.browser.msie && $.browser.version < 7;
    if (!msie6) {
        var top = $('#scroll_header').offset().top
                - parseFloat($('#scroll_header').css('margin-top').replace(
                        /auto/, 0));
        $(window).scroll(function(event) {
            var y = $(this).scrollTop();
            if (y >= top) {
                $('#scroll_header').addClass('fixed');
            } else {
                $('#scroll_header').removeClass('fixed');
            }
        });
        var y = $(this).scrollTop();
        if (y >= top) {
            $('#scroll_header').addClass('fixed');
        } else {
            $('#scroll_header').removeClass('fixed');
        }
    } else {
        setInterval("checkScroll()", 100);
    }
});
function checkScroll() {
    ie6top = $('#scroll_header_wrapper').offset().top;
    if ($(document).scrollTop() > ie6top) {
        $('#scroll_header').css("top", $(document).scrollTop() - ie6top + "px");
        $('#scroll_header').css("visibility", "visible");
    } else {
        $('#scroll_header').css("visibility", "hidden");
    }
}