javascript - 保持固定的 div 与另一个 div 的特定距离，即使在调整大小时也是如此

Question

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

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

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

Answer 1

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

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); 
})

使用左位置而不是右。

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