在滚动页面时保持页面元素在视图中

Question

我正在寻找一种解决方案来保持视图中的元素，同时滚动页面的其余部分。

我不想重新发明轮子，所以我要联系以了解社区是否已经知道罐头解决方案。

我想将它应用到我拥有的一个巨大的表中，我希望用户能够在向下滚动时继续查看表头。

为了澄清，我正在寻找的是与具有溢出CSS设置的可滚动表不同。我不能使用可滚动表的原因是因为该方法变得非常慢，有数千行。此方法在iPhone浏览器上也无法正常工作。

理想情况下，我希望这样当用户向下滚动页面时，表格的标题会“粘在”浏览器视图的顶部边缘。反过来，如果用户向上滚动它会继续粘在那里，直到它回到标题开始的原始位置。

Answer 1

您在寻找#element { position: fixed; ... }吗？您可以使用JS在fixed，relative和absolute之间切换。

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

修改

看看他们是如何做到的[我希望他们不介意] 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

他们使用jQuery，它看起来并不复杂，而且还有IE6解决方法

$(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");
    }
}