Question

我想实现这样的目标;

我希望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);
        }
    })
});

jquery粘性背景滚动

1 个答案: