javascript - 即使调整大小，也要使固定div与另一个div保持特定距离

我基本上希望导航div距图片的右边缘说50像素，但需要对其进行修复，以便在滚动时它仍保留在该位置。基本上，随着图片在浏览器中的大小调整，导航栏应与图片保持50px的永久关系。我只是不确定如何在固定的div上执行此操作。

#wrapperNav {
    position: fixed;
    top: 45%;
    bottom: 0;
    right: 200px;
    z-index:999;
}

代码：http://jsfiddle.net/LLtnZ/

最佳答案

计算窗口调整大小时导航的位置。

JS

 $(window).resize(function(){
    var gutter_space = 55;
    var left_pos =  ($('.item img').outerWidth() + $('.item img').offset().left) - gutter_space;
   $('#wrapperNav').css('left',left_pos);
})

使用left位置而不是右位置。

DEMO

更新：等距

JS

    $(window).resize(function(){
           var left_width =  ($('.item img').outerWidth() + $('.item img').offset().left);
           var gap = ($(window).outerWidth() - left_width);
           var right_pos =  (gap - $('#wrapperNav').width())/2; //Space to be left on each side of the nav.
           $('#wrapperNav').css('right',right_pos);
    });

同时更新您的CSS，出于演示目的，将宽度设置为#wrapperNav

Updated Demo