使用背景位置滚动背景图像视差：底部答案

【问题标题】：Scrolling Background-Image Parallax with background-position: bottom使用背景位置滚动背景图像视差：底部
【发布时间】：2021-10-21 01:28:06
【问题描述】：

我正在使用下面的 jQuery 代码在 WordPress 网站的标题区域创建视差效果。我在这里找到了代码并对其进行了修改以在我的网站上工作并处理由我的导航栏引起的偏移。在下面的代码中，背景图像从顶部定位。但是，我现在被问到是否可以将背景位置设置为底部，并且视差效果可以从那里向上滚动。我可以调整 CSS 以使其 background-position: 50% bottom 开始，但一旦你开始滚动，位置就会再次从顶部偏移。有人可以帮忙吗？我在 CSS 方面比在 jQuery 方面要好得多，并且一直在尝试寻找解决方案好几个小时，但无济于事。

使用代码的网页可以在这里找到https://thamesenterprisepark.com/staging/index.php/about/

<script>
        jQuery(document).ready(function($) {
        // The function
        var background_image_parallax = function($object, multiplier){
          multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
            multiplier = 1 - multiplier;
          var $doc = $(document);
          $object.css({"background-attatchment" : "fixed"});
            $(window).scroll(function(){
              var from_top = $doc.scrollTop() + -90,
                  bg_css = '50% '+(multiplier * from_top) + 'px';
              $object.css({"background-position" : bg_css });
          });
        };
    
        //Just pass the jQuery object
        background_image_parallax($(".box2"));
    
        //optional second value for speed
        background_image_parallax($(".hentry.has-post-thumbnail"));
        });
</script>

【问题讨论】：

标签： jquery css parallax

【解决方案1】：

好的，经过大量的反复试验，我想我找到了解决方案。我更改了这行代码，使乘数为负

multiplier = 0 - multiplier;

更改了这行代码以删除导航栏的偏移量，因为它不再需要并且现在在顶部留下一个空白

  var from_top = $doc.scrollTop(),

并更改了这行代码以包含背景位置的 css 偏移量，以允许它从底部偏移。我一直在尝试这样做，但无法找出正确的语法。

bg_css = 'left 50% bottom '+(multiplier * from_top) + 'px';

需要测试，跨浏览器和跨设备，但到目前为止它正在发挥作用。

【讨论】：