jQuery：即使页面向下滚动，也可以在页面中心保留一个div

Question

我想在屏幕上居中放置div，以便在向下/向上滚动页面时，div平滑滚动到页面中心。 我正在尝试此代码（请参阅jsfiddle），但不起作用。 有人可以帮我吗？ 谢谢。

Answer 1

您不需要jquery，只需使用CSS

的HTML

<div id="senad">content</div>

的CSS

 #senad { width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; border: 1px solid gray;}

锡将保持元素居中。

Answer 2

为什么不只是将其标记在position: fixed无论用户在哪里滚动，都将其position: fixed并保持在该位置？ 然后，您不需要任何形式的JavaScript欺骗。

但是，要回答您当前的问题，似乎您只提供了一次居中，但是您从未对窗口的滚动事件做出反应：

 $(window).scroll(function() { $('#box').center(); });

Answer 3

使用这个插件：

jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","50%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}

$("#id").center();

Answer 4

干得好。 更新了滚动事件并考虑了document.body.scrollTop

http://jsfiddle.net/8Dupa/4/

$（window）.scroll（function（）{$（'＃box'）。center（）;}）;

在center（）之内

顶部+ = document.body.scrollTop;