位置靈活調整大小：絕對和左？

Question

HTML

<div class="wrapper"> 
    <div class="container"> 
<div class="des-main"> 
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" width="100"/> 
</div> 

<div class="des-sidebar-wrapper"> 
     <div class="des-sidebar pure-u"> 
      <div class="des-sidebar-section"> 

        <a>Contact designer</a> 

       </div> 
      </div> 
    </div> 
</div> 
    </div> 

JQuery的

var _sidebar = $('.des-sidebar'); 
    var top = _sidebar.offset().top - parseFloat(_sidebar.css('marginTop').replace(/auto/,0)); 

    $(window).scroll(function(){ 
      var y = $(window).scrollTop(); 

      if(y >= top){ 
       _sidebar.addClass('fixed'); 
      } 
      else{ 
       _sidebar.removeClass('fixed'); 
      } 
    }); 

在脫主區域

，不同的圖像將根據上傳更大或更小。所以des-sidebar-wrapper的左邊的css應該根據des-main的寬度。有沒有相應改變左邊的方法？左圖：自動只會將側邊欄移動到左側。因此，如果將圖像寬度更改爲200px，則側邊欄將與圖像重疊。

幫助感謝！

這裏的jsfiddle：http://jsfiddle.net/kittymeow/YyLMa/

Answer 1

此功能手柄基於圖像的寬度，

試試這個，

JsFiddle

var _sidebar = $('img'); 
var position = _sidebar.width(); 
$(".des-sidebar-wrapper").offset({ left: position+_sidebar.offset().left}); 

    $(window).scroll(function(){ 
      var y = $(window).scrollTop(); 

      if(y >= top){ 
       _sidebar.addClass('fixed'); 
      } 
      else{ 
       _sidebar.removeClass('fixed'); 
      } 
    });