javascript - 滚动页面时保持页面元素在 View 中

Question

我正在寻找一种解决方案，让一个元素保持可见，同时滚动页面的其余部分。

我不想重新发明轮子，所以我想看看社区是否已经知道固定解决方案。

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

澄清一下，我正在寻找的不同于具有溢出 CSS 设置的可滚动表格。我不能使用可滚动表的原因是因为该方法在处理数千行时变得非常慢。此外，该方法在 iPhone 浏览器上效果不佳。

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

Answer 1

你在寻找 #element { position: fixed; ... }？您可以使用 JS 在固定、相对和绝对之间切换。

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