根據窗口大小刪除視差

Question

我的頁面上有視差效果，並且想在768和更小的屏幕上禁用該效果。 我該如何完成這項任務？ 這是我使用的JavaScript。

<script>
$(window).scroll(function(){

// Add parallax scrolling to all images in .paralax-image container
  $('.parallax-image').each(function(){
    // only put top value if the window scroll has gone beyond the top of the image
        if ($(this).offset().top < $(window).scrollTop()) {
        // Get number of pixels the image is above the top of the window
        var difference = $(window).scrollTop() - $(this).offset().top;
        // Top value of image is set to half the amount scrolled
        // (this gives the illusion of the image scrolling slower than the rest of the page)
        var half = (difference / 2) + 'px',
            transform = 'translate3d( 0, ' + half + ',0)';

        $(this).find('img').css('transform', transform);
    } else {
        // if image is below the top of the window set top to 0
        $(this).find('img').css('transform', 'translate3d(0,0,0)');
    }
  });
});
</script>

Answer 1

您可以將代碼包裝在一個函數中，並在加載和調整大小時運行。

$.load_parallax = function(){
      if ($(window).width() > 768) {
          $(window).scroll(function(){
             $('.parallax-image').each(function(){
                 //your code here
             });
           });
    }
}
    $(window).on('resize', function() {
       $.load_parallax(); //calls it on resize
    });

      $.load_parallax();//calls it on load