3

divページのスクロール後に画面の垂直方向の中央に配置する必要がある

ここにデモがあります - http://jsfiddle.net/JtZ7F/

<div style="height:1000px; border:1px solid red;">
    scroll
    <span style="height:150px; width:100px; float:right; border:1px solid green; display:block; position:fixed;top:50%; margin-top:-75px;">
        need vertical center of the screen after page scroling
    </span>
</div>

今私は使用していますがposition:fixed;、それは解決策ではありません

ページのスクロールを停止すると、緑色のボックスが画面の垂直方向の中央にスムーズに移動します。

jQueryでこれを行うにはどうすればよいですか?

4

2 に答える 2

4

この関数を jquery に追加します。

jQuery.fn.center = function () {   
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");    
 this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");     return this; }

スパン "test" に ID を追加し、document.ready に以下を記述します。

$(document).ready(function(){    
$('#test').center(); 
});
于 2012-05-17T10:13:47.783 に答える