background-position-y 的 Choppy JavaScript 动画答案

【问题标题】：Choppy JavaScript Animation of background-position-ybackground-position-y 的 Choppy JavaScript 动画
【发布时间】：2017-02-20 17:11:14
【问题描述】：

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

我目前得到的解决方案是使用background-size: contain 来防止在所有屏幕尺寸上剪切图像，同时通过在滚动时为background-position-y 设置动画来使用JavaScript 模拟background-attachment: fixed。问题是，如果我然后单击一个按钮，该按钮会导致页面下方出现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>

【问题讨论】：

为什么不background-attachment:fixed 和background-size:contain？
当我执行background-attachment: fixed 时，它会导致图像被剪裁。在测试图像中，您可以看到如果您缩小 iframe，他的头发就会被剪掉。
你的意思是他在卷轴为0的时候剪头发？ background-attachment:fixed;background-position-y:[height of top element];background-size:contain 呢？我想我不明白这个问题
seems to work! 发帖作为答案，我会接受。它切断了图像的底部，但我可以将顶部偏移量添加到图像的高度来修复它。

标签： javascript animation background-image background-position background-attachment

【解决方案1】：

发布来自 cmets 的答案：

您可以同时使用background-attachment:fixed; 和background-size:contain;，并通过使用background-position-y:[height of top element]; 偏移图像来避免顶部切割。

【讨论】：

【解决方案2】：

您可以在.hero-banner 元素处将transition 属性设置为background-position-y .5s ease-in-out

// 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;
  transition: background-position-y .5s ease-in-out;
}

<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>

【讨论】：

【解决方案3】：

jQuery 动画往往是不稳定的，因为它非常高级；您的计算机需要计算很多东西才能制作动画。如果我是你，我会使用原生 CSS 解决方案。 Here 是一些不错的教程。

【讨论】：

【解决方案4】：

除了上述答案之外，尝试使用固定位置而不是在滚动时移动元素。会流畅很多。

【讨论】：