фиксированное изображение в контейнере

Question

Каков наилучший способ сделать прокрутку div вместе со страницей?

Точный эффект используется @http://store.apple.com/ (в сводке кассы после продукта добавлен в корзину)

редактирования: или this example - увы, это не так гладко, как я хотел бы, чтобы это было =/

Answer 1

JQuery экономит день ... снова!

CSS:

#wrapper { 
    position: absolute; 
    width: 200px; 
} 

#fancyDiv { 
    position: absolute; 
    top: 0; 
} 

#fancyDivt.fixed { 
    position: fixed; 
    top: 0; 
} 

HTML:

<div id="commentWrapper"> 
    <div id="comment"> 
    <p>some text</p> 
    </div> 
</div> 

JQuery:

$(document).ready(function() { 
    $(function() { 
     var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').css('margin-top').replace(/auto/, 0)); 
     $(window).scroll(function (event) { 
       // what the y position of the scroll is 
       var y = $(this).scrollTop(); 

       // whether that's below the div 
       if (y >= top) { 
       // if so, ad the fixed class 
       $('#fancyDiv').addClass('fixed'); 
       } else { 
       // otherwise remove it 
       $('#fancyDiv').removeClass('fixed'); 
       } 
     }); 
    } 
}); 

Answer 2

Во втором примере они используют jQuery для этого. Прокручивается событие объекта окна, и при использовании функции animate() положение div изменяется динамически.

Answer 3

Этот учебник поможет вам: http://css-tricks.com/scrollfollow-sidebar/