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;