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-main区域，根据上传的不同，不同的图像会更大或更小。所以des-sidebar-wrapper左边的css应该按照des-main宽度进行。有没有办法相应地改变左边？左：自动仅将侧边栏移动到左侧0.因此，如果将图像宽度更改为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');
           }
    });

灵活调整位置：绝对和左侧？

1 个答案: