Question

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

我目前使用的解决方案是使用background-size: contain来防止在所有屏幕尺寸上裁剪图像，同时通过动画background-attachment: fixed滚动来模拟JavaScript background-position-y。问题是如果我然后单击导致页面scrollTop动画的按钮，则图像的background-position-y设置不稳定。

知道如何防止动画中的这种混蛋？

＆＃13;

// 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);
    });

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

发表评论的回答：

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

Answer 2

您可以在transition元素

处将background-position-y .5s ease-in-out属性设置为.hero-banner

＆＃13;

// 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);
    });

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

除上述答案外，尝试使用固定位置而不是在滚动上移动元素。它会更顺畅。

背景位置y的糟糕的JavaScript动画

4 个答案: