1

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

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

4

4 回答 4

1

从评论中发布答案：

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

于 2016-10-12T02:50:56.307 回答
0

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

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

于 2016-10-12T02:18:55.917 回答
0

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

于 2016-10-12T02:40:09.413 回答
0

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

于 2016-10-12T05:29:43.623 回答