Question

我基本上希望导航div从图片的右边缘说50px但是需要修复它以便滚动时它仍然保留在该位置。基本上，随着使用浏览器调整图像大小，导航应该与图像保持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); 
})

使用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

Answer 2

我并非100％确定我理解了这个问题，但我对它进行了抨击。这与你的要求相似吗？

http://jsfiddle.net/LLtnZ/1/

var moveNav = function(left){
    $('#wrapperNav').css({'left': left});
};

moveNav( $('.item:visible').width() + 50 );

$(window).on('resize', function(left){
    var img = $('.item:visible');
    var imgWidth = img.width();
    moveNav(imgWidth + 50);
});

希望这有帮助！如果那是朝着正确的方向前进，请告诉我。

即使调整大小，也可以将固定div与另一个div保持特定距离

2 个答案: