jquery - vAlign 元素居中，但相对于内容处于水平位置

Question

http://jsfiddle.net/DAFHq/1/

<div id="gray-box">
<div id="red-box"></div>
</div>

我需要将红色方 block 放置在其中包含滚动内容的灰色框右侧 20 像素处，同时使其在中心垂直对齐。

在滚动和调整屏幕大小时，它应该保持相对于灰色框的位置。

有什么想法吗？ jsFiddle 是我发现并修改以显示我需要的，垂直对齐是完美的，但我不知道如何定位它我需要它水平。

也许是 jQuery 的东西？

Answer 1

试试这个:

var positionFoo = function() {
  $('#foo').css({
    'left': $('#bar').offset().left + $('#bar').width() + 20 + 'px',
    'top': ($(window).height() / 2) - ($('#foo').height() / 2)
  });
};

$(window).resize(positionFoo);
positionFoo();

您还需要将 position: fixed; 添加到 #Foo。

Updated fiddle