背景位置-y的起伏JavaScript动画

Question

所以我的实际问题是，我想要一个固定的背景图像效果，同时保持背景图像足够宽来填充一个容器。不幸的是，使用background-attachment:fixed;的CSS方式只会相对于视口定位图像。这就造成了屏幕大小与背景图像大不相同的问题，在这种情况下，屏幕大小会导致背景图像(即人的照片)不需要的剪裁。

我目前得出的解决方案是使用background-size: contain来防止在所有屏幕大小上裁剪图像，同时通过在滚动体上动画background-position-y来模拟background-attachment: fixed和JavaScript。问题是，如果我单击一个导致页面下端的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:[height of top element];抵消图像来避免顶部剪切。

Answer 2

您可以在transition元素中将.hero-banner属性设置为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>

​

Answer 3

jQuery动画往往是不稳定的，因为它是非常高的水平；有很多东西，你的计算机需要计算动画。如果我是你，我会使用原生CSS解决方案。这里是一些很好的教程。