我有一个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中执行此操作?
答案 0 :(得分:3)
在你的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();
});
答案 1 :(得分:3)
我是如何做到的,在Chrome&amp; IE7 +,请参阅jsfiddle以获取示例。
$.fn.center = function () {
return this.css({
'left': ($(window).width() / 2) - $(this).width() / 2,
'top': ($(window).height() / 2) - $(this).height() / 2,
'position': 'fixed'
});
};
用法:
$(document).ready(function(){
$(element).center();
});