Zentrieren eines Div auf einer Seite mit jQuery, wenn die Seite länger ist als das Fenster

Question

Ich muss this question einen Schritt weiter gehen.

Die Div I vertikal zentriert haben wird mit dem folgenden Code:

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

Das funktioniert gut, wenn die Seite nur so groß wie das Fenster, aber wenn die Seite viel länger ist und der Benutzer ist auf halbem Weg nach unten Wenn Sie auf die Seite klicken, um den Code #notifications oben zu öffnen, wird das div am oberen Rand des Bildschirms zentriert angezeigt, sodass sie die Box möglicherweise komplett vermissen.

Wie kann ich den Code erkennen, wo auf der Seite der Benutzer ist, so dass das Div wird vertikal zentriert angezeigt, egal wie weit sie scrollen?

Vielen Dank im Voraus!

Answer 1

Sie position:fixed verwenden können, um das Element relativ zu dem Fenster zu platzieren, anstatt in Bezug auf die Seite. Auf diese Weise wird es zentriert angezeigt und bleibt zentriert, auch wenn der Benutzer scrollt.

Answer 2

Sie möchten document statt window verwenden. Siehe hier:

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

in Ihrem Code ersetzen $(window).height() mit $(document).height().

Wenn Sie ein <div> immer auf dem Bildschirm zentriert werden, unabhängig davon, wo sich der Benutzer scrollt nach dem <div> in geladen wird, Sie sollte Verwendung $(window).height() und stellen Sie die <div> seine Position zu fixiert. Sie können dies in Aktion sehen hier:

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

Answer 3

Try Code unten, in das wir zuerst das Zentrieren des div in Fenster sind es in der Benutzeranzeige bringen wir Scroll oben und blättern Sie nach links, um es hinzuzufügen -

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