javascript - 视差 - 帮助使垂直位置从 200px 而不是 0px 开始

Question

我正在使用预编码的 Parallax JQuery 作为 Wordpress 主题的一部分，Studiopress 将其称为 Parallax。它工作得很好，但我最终在滚动时错过了图像的上半部分，我希望用户在向下滚动时也能看到它。目前，背景位置从“50% 0px”开始，滚动页面时 px 变为负数。我想如果我将它设置为从 200 或 300 像素开始，则可以查看大部分图像。但是，我无法设置 CSS，因为它会被 JQuery 覆盖。

我是 JQuery 的新手，所以我想知道是否有任何指示或方法可以帮助我？

这是代码:

jQuery(function ($) {

    // Enable parallax and fade effects on homepage sections
    $(window).scroll(function () {

        scrolltop = $(window).scrollTop()
        scrollwindow = scrolltop + $(window).height();

        $(".home-section-2").css("backgroundPosition", "50% " + -(scrolltop / 6) + "px");

        if ($(".home-section-4").length) {

            sectionthreeoffset = $(".home-section-4").offset().top;

            if (scrollwindow > sectionthreeoffset) {

                // Enable parallax effect
                backgroundscroll = scrollwindow - sectionthreeoffset;
                $(".home-section-4").css("backgroundPosition", "50% " + -(backgroundscroll / 6) + "px");

            }

        }
    })
});

Answer 1

对于顶部图像 - 将 scrolltop 更改为 scrolltop = $(window).scrollTop() + -1000 数字越大，起始像素也越大。

每个其他图像都需要一个名为 scrolltop2 的 scrolltop 的副本，它不包含数字。这在 scrollwindow 中被引用。

scrolltop2 = $(window).scrollTop()
scrollwindow = scrolltop2 + $(window).height();

然后把数字添加到backgroundscroll
例如:backgroundscroll = scrollwindow - sectionthreeoffset + -1500;