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

Question

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

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

edit: или этот пример - увы, это не так гладко, как хотелось бы = /

Answer 1

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

Answer 2

jQuery спасает день ... снова!

CSS:

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

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

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

HTML:

* +1007 *

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 3

Это руководство должно помочь вам: http://css -tricks.com / scrollfollow-sidebar /