Сохранение элемента страницы в поле зрения при прокрутке страницы - PullRequest
Новая
       15

Сохранение элемента страницы в поле зрения при прокрутке страницы

1 голос
/ 16 августа 2010

Я ищу решение, позволяющее держать элемент в поле зрения при прокрутке остальной части страницы.

Я не хочу заново изобретать колесо, поэтому я пытаюсь выяснить, знает ли сообщество уже о готовом решении.

Я хочу применить это к огромной таблице, которая у меня есть, и я бы хотел, чтобы пользователи могли продолжать видеть заголовки таблиц при прокрутке вниз.

Просто чтобы уточнить, что я ищу, отличается от прокручиваемой таблицы с настройками CSS переполнения. Причина, по которой я не могу использовать прокручиваемую таблицу, заключается в том, что этот метод становится очень медленным с тысячами строк. Также этот метод плохо работает в браузере iPhone.

В идеале мне бы хотелось, чтобы, когда пользователь прокручивал страницу вниз по заголовку таблицы, он «прилипал» к верхнему краю представления браузера. И наоборот, если пользователь прокручивает назад вверх, он будет продолжать придерживаться там, пока не вернется в исходное положение, с которого начался заголовок.

1 Ответ

3 голосов
/ 16 августа 2010

Вы ищете #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");
    }
}
...