求助：如何将WordPress中基于jQuery的背景图片视差效果改为以background-position: bottom为初始定位并实现向上滚动视差

嘿，我来帮你搞定这个视差滚动的调整！核心问题在于原代码的背景偏移逻辑是基于页面顶部的滚动距离向下移动，现在我们要把它改成从底部开始向上移动，只需要调整几处计算逻辑就行。

修改后的完整代码 #

<script>
jQuery(document).ready(function($) {
    // 视差滚动函数
    var background_image_parallax = function($object, multiplier){
        // 设置默认速度值，可通过第二个参数自定义
        multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
        var $doc = $(document);
        
        // 初始化背景样式：固定定位 + 底部对齐
        $object.css({
            "background-attachment": "fixed",
            "background-position": "50% bottom"
        });

        $(window).scroll(function(){
            // 保留你原来的导航栏偏移修正
            var scroll_adjusted = $doc.scrollTop() - 90;
            // 计算背景向上偏移的距离：用calc实现从底部开始向上移动
            var bg_css = '50% calc(bottom + ' + (-multiplier * scroll_adjusted) + 'px)';
            $object.css({"background-position": bg_css });
        });
    };

    // 给目标元素应用视差效果
    background_image_parallax($(".box2"));
    // 可选：第二个参数控制滚动速度，值越大背景移动越快
    background_image_parallax($(".hentry.has-post-thumbnail"), 0.7);
});
</script>

关键改动说明 #

1. 移除速度反转逻辑：原代码里的multiplier = 1 - multiplier是为了让背景移动慢于滚动，现在我们直接用传入的multiplier控制向上移动的速度，数值越大，背景向上滚动越快。
2. 初始化底部对齐：在函数里直接设置初始背景定位为50% bottom，确保页面加载时背景图片底部和元素底部完美对齐。
3. 反转偏移方向：滚动事件中使用calc(bottom + (-multiplier * scroll_adjusted)px)，当页面向下滚动时，负数偏移量会让背景图片相对于元素向上移动，正好实现你要的从底部开始的视差效果。
4. 保留导航栏修正：继续使用你原来的scroll_adjusted = $doc.scrollTop() - 90，解决导航栏导致的偏移问题。

这样修改后，初始状态背景在底部，滚动时背景会平滑地向上移动，完全符合你的需求～

内容的提问来源于stack exchange，提问作者user3433046