モバイルで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

私は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 
    } 
    }); 
}); 

は、この情報がお役に立てば幸い！ :)

Answer 2

グラブ負荷にビューポートの幅：

は、ここに私のコードです。スクロールハンドラ内で、幅がモバイルよりも大きいかどうかを確認し、幅が768より大きい場合（またはモバイルのブレークポイントが何であれ）、EasyPeasyParallax（）メソッドを呼び出します。

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

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

});