Deaktivieren Sie Javascript Parallax-Effekt auf Handy

Question

Kann mir jemand sagen, wie ich meinen Parallax-Effekt auf Handy deaktivieren? Danke im Voraus für Ihre Hilfe!

Hier ist mein Code:

$(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

Ich würde empfehlen, den Einsatz von window.matchMedia() machen:

$(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 
    } 
    }); 
}); 

hoffe, das hilft! :)

Answer 2

greifen die Darstellungsbreite auf Last. Stellen Sie in einem Scroll-Handler sicher, dass die Breite über dem Mobilbereich liegt, und rufen Sie Ihre EasyPeasyParallax() -Methode nur auf, wenn die Breite größer als 768 ist (oder was auch immer Ihr Haltepunkt für Mobilgeräte ist).

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

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

});