jquery粘性背景卷轴

Question

我想实现这样的目标；

http://wind-dance.com/sticky/

我希望html固定位置，直到图像滚动到底部。目前，我的脚本编码，它将滚动与html滚动。

有任何jquery脚本可以达到我想要的类似效果吗？

更新1

也许我上面的问题还不清楚。那时我改变了提问的方式。我希望滚动div元素，而不滚动主体内容，直到div元素到达底部。希望这能让大家都明白。内联脚本是我的当前代码，我可以部分实现它。

更新2

查看@bhavesh解决方案，我尝试将其修改为

$(document).ready(function() {
    var row = $('.row');
    var scroll_banner = $('.scroll_banner');
    var scroll_banner_height = scroll_banner.height();
    var row_height = row.height();

    $(window).on('scroll', function() {
        scroll_banner_height = scroll_banner.height();
        var windowPos = $(this).scrollTop();
        var scrollableAmount = windowPos / row_height * scroll_banner_height;
        row.scrollTop(scrollableAmount);
    })
});

这是非常糟糕的滚动和感觉不安的经验，有scrollTop在身体上的每一个滚动。

Answer 1

您可以在示例中找到内联脚本，基本上在这个示例中，您将使用scrollTop属性附加到带有div滚动(包含图像)的Window Scroll事件上。

$(document).ready(function() {
    var row = $('.row');
    var scroll_banner = $('.scroll_banner');
    var scroll_banner_height = scroll_banner.height();
    var row_height = row.height();

    $(window).on('scroll', function() {
        var windowPos = $(this).scrollTop();
        var oldRowPos = row.scrollTop();
        row.scrollTop(oldRowPos+windowPos);
        var newRowPos = row.scrollTop();
        console.log([scroll_banner_height-row_height,newRowPos]);
        if (newRowPos < (scroll_banner_height-row_height)) {
            $(this).scrollTop(0);
        }
    })
});