Центрирование div на странице с помощью jQuery, когда страница длиннее окна - PullRequest
Новая
       9

Центрирование div на странице с помощью jQuery, когда страница длиннее окна

0 голосов
/ 27 декабря 2010

Мне нужно ответить на этот вопрос на один шаг дальше.

У меня есть div по центру по вертикали, используя следующий код: 

var boxheight = $('#notifications').height();
var windowheight = $(window).height();
var boxheight = $('#notifications').height();
var pagecenterH = ((windowheight-boxheight)/2);
$('#notifications').animate({'top': pagecenterH});

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

Как я могу получить код, который распознает, где на странице находится пользователь, чтобы div отображался вертикально по центру, независимо от того, как далеко они прокручиваются вниз?

Спасибозаранее!

Ответы [ 3 ]

1 голос
/ 27 декабря 2010

Вы хотите использовать document вместо window. Смотрите здесь:

http://jsfiddle.net/GftBg/1/

В вашем коде замените $(window).height() на $(document).height().

Если вы хотите, чтобы <div> всегда центрировался на экране, независимо от того, где пользователь прокручивает после загрузки <div>, вам следует использовать $(window).height() и установить <div> Положение к фиксированной. Вы можете увидеть это в действии здесь:

http://jsfiddle.net/GftBg/2/

0 голосов
/ 27 декабря 2010

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

    $('#notifications').css("position","absolute");
    $('#notifications').css("top", ( $(window).height() - $('#notifications').height() ) / 2+$(window).scrollTop() + "px");
    $('#notifications').css("left", ( $(window).width() - $('#notifications').width() ) / 2+$(window).scrollLeft() + "px");
0 голосов
/ 27 декабря 2010

Вы можете использовать position:fixed для размещения элемента относительно окна, а не относительно страницы.Таким образом, он будет отображаться по центру и останется по центру, даже если пользователь прокрутит.

...