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);
    })
});

每次滚动都在 body 上设置 scrollTop，滚动体验非常糟糕。

Answer 1

您可以在示例中找到内联脚本 基本上在这个例子中，您使用 scrollTop 属性将 On Window Scroll 事件与 div 滚动（包含图像）附加在一起。

$(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);
        }
    })
});