Javascript 即使调整大小，也要将固定分区与另一个分区保持特定的距离

我基本上希望导航div是从图片右边缘算起的50px，但它需要固定，这样当你滚动时，它仍然保持在原来的位置。基本上，随着浏览器调整图像大小，导航应该与图像保持50px的永久关系。我只是不知道如何用一个固定的div来做这个

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

---

代码：

我不是100%确定我理解了这个问题，但我尝试了一下。这和你问的相似吗

---

希望这有帮助！如果方向正确，请告诉我。

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

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

使用

左

位置而不是右

更新：等间距

JS

同时更新css，用于演示，为

#wrapperNav

---

在小提琴中使用占位符非常重要，这样它实际上会显示一幅图像。将

wrapperNav

div添加到

item

div。添加到

item

css

position:relative添加到
wrapperNav
css:
{位置：绝对；底部：20px；右侧：50px；z-index:999；}
是否有一种方法可以使img到nav到页面右侧的间距都相等？[img]导航|对我不理解您的问题，但您可以更改
间距
变量的值以调整导航的位置。或者只是在图像中描述您的要求..对不起，我的意思是，脚本可以写得像这样，以便导航考虑到它与图像的距离，同时考虑到它与视口右边缘的距离，以便两个距离始终相等，这意味着导航栏直接位于图像和视口右侧之间，根据我所理解的更新代码。看看这是否有帮助。
 $(window).resize(function(){
    var gutter_space = 55;
    var left_pos =  ($('.item img').outerWidth() + $('.item img').offset().left) - gutter_space;    
   $('#wrapperNav').css('left',left_pos); 
})

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