jquery - 背景附件：修复了无法在 chrome 中使用光滑滑块的问题

Question

我已经创建了 jquery 光滑的滑块。我想要background-attachment:fixed的。它在 moz、IE 中运行良好，但在 google chrome 中无法运行。

请找到小提琴演示

HTML：

<div class="homeBannerSlider">
    <div id="homeSlckSlider">
        <div>
        <div class="slider slider1"></div>
        </div>
        <div>
        <div class="slider slider2"></div>
        </div>
    </div>
</div>

CSS：

.slider {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    -webkit-backface-visibility: hidden
    overflow: hidden;
}
.slider1 {
    background-image: url(http://backgroundpic.xyz/wp-content/uploads/ktz/beautiful-bregje-heinen-lovely-model-girl-dress-red-fashion-2zqr635zyr5rr9pkwtvg22.jpg);
}

JS：

$('#homeSlckSlider').slick({ 
      autoplay:true, 
      dots: false,
      arrows: false,
      infinite: true,
      speed: 2000,
      autoplaySpeed: 15000,
      fade: true,
      cssEase: 'linear'
});
slider();
$(window).resize(function(){
slider();
});

function slider() {
    var winHeight = $(window).height();
        $('.homeBannerSlider, .slider').css({'height': winHeight +'px'});
    }

Answer 1

请试试这个 JS。希望它会帮助你。

    function parallax(selector){
      var scrolled = $(window).scrollTop();
      $(selector).css('background-position',"0 "+  (scrolled * 1) + 'px');
    }

    $(window).scroll(function(e){
      parallax('.slider .item');
    });