javascript - 背景位置 y 的断断续续的 JavaScript 动画

Question

所以我遇到的实际问题是我想要固定的背景图像效果，同时保持背景图像足够宽以填充容器。不幸的是，CSS 方式使用 background-attachment:fixed; 只能相对于视口(viewport)定位图像。这会在宽高比与背景图像截然不同的屏幕尺寸上产生问题，导致背景图像(即人的图片)出现不必要的剪裁。

我目前达到的解决方案是使用background-size: contains来防止在模拟background-attachment:fixed时在所有屏幕尺寸上剪切图像使用 JavaScript 通过在滚动时对 background-position-y 进行动画处理。问题是，如果我单击一个按钮，导致页面向下滚动 scrollTop 动画，则图像的 background-position-y 设置会不稳定。

知道如何防止动画中出现这种抖动吗？

// Banner scroll function
    var scrollTop = $(window).scrollTop();
    var banner = $('.hero-banner').css('background-position-y',scrollTop+'px');
    var debounced_fixBG = function(){
        var newScrollTop = $(window).scrollTop();
        banner.css('background-position-y',newScrollTop+'px');
        scrollTop = newScrollTop;
    };
    $(window).scroll(debounced_fixBG);
    
     $('.scroll-down').on('click',function(){
        $('html,body').animate({
            easing: 'swing',
            scrollTop: $('#anchor').offset().top
        },2000);
    });

.hero-banner {
  background-image: url('http://londonprogressivejournal.com/site_images/741.jpg');
  height: 383px;
  background-repeat: no-repeat;
  background-attachment: contain;
  background-position-y: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="scroll-down">
Scroll Down
</button>
<div class="hero-banner">
&nbsp;
</div>
<br>
<br>
<br>
<br>
<br>
<a id="anchor">Anchor</a>

Answer 1

发布评论中的答案:

您可以同时使用 background-attachment:fixed; 和 background-size:contain; 并通过使用 background-position 偏移图像来避免顶部剪切-y:[顶部元素的高度];.