在移动设备上禁用 Javascript 视差效果

Question

谁能告诉我如何在移动设备上禁用视差效果？预先感谢您的帮助！

这是我的代码：

$(document).scroll(function() { 
var y = $(document).scrollTop(), header = $(".page-nav"); if(y >= 528) 
{ header.css({position: "fixed", "top" : "0", "left" : "0"}); } else 
{header.css("position", "relative"); } });

function EasyPeasyParallax() {
scrollPos = $(this).scrollTop();
$('.landing-page-hero').css({
    'background-position' : '50% ' + (-scrollPos/4)+"px"
});

$('.hero-content').css({
    'margin-top': (scrollPos/4)+"px",
    'opacity': 1-(scrollPos/250)
});
}

$(document).ready(function(){
$(window).scroll(function() {
    EasyPeasyParallax();
});
});

Answer 1

加载时获取视口宽度。在滚动处理程序中，检查以确保宽度高于移动设备，并且仅在宽度大于 768（或移动设备的断点是什么）时才调用 EasyPeasyParallax() 方法。

var $vpwidth = $( window ).width();

$( window ).scroll(function() {
   if ($vpwidth >= 768){
     EasyPeasyParallax();
   }

});

Answer 2

我建议使用 window.matchMedia():

$(document).ready(function(){
  var mq = window.matchMedia("(min-width: 600px)"); // Your desired breakpoint
  if (mq.matches) {
    $(window).scroll(function() {
      EasyPeasyParallax(); // Only parallax on devices at least 600px wide
    }
  });
});

希望对您有所帮助！ :)

在移动设备上禁用 Javascript 视差效果

Disable Javascript Parallax Effect on Mobile

javascript

responsive