Question

我创建了jquery光滑的滑块。我想要background-attachment:fixed。它在moz，IE中运行良好，但在谷歌浏览器中无效。

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

background-attachment：固定不使用chrome中的光滑滑块

1 个答案: