滚动并修复内容

Question

我正在尝试创建一个页面，文本在图像保持固定的同时滚动，但仅当页面到达某个点（滚动并修复内容）时。到目前为止，我使用的javascript是：

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();

    if (scrollTop > 519) {
          $('#leonardo').css({ 'position': 'fixed', 'top' : '74px' });
    } else {
        $('#leonardo').css({ 'position': 'relative', 'top': '519px'});
    }
});

$(document).ready(function () {
    $(".container").animate({
         marginTop: "0"
    },2000);
});

我要冻结的图片的CSS规则是：

#leonardo {
    background-image:url(Images/Leonardo-Robot3%20Resized.png);
    background-repeat:no-repeat;
    width:300px;
    height:527px;
    float:left;
}

如果可能，我希望在到达文本的每个新标题时更改图像，例如

（http://pitchfork.com/features/cover-story/reader/bat-for-lashes/）