Disable a FUNCTION on mobile

Asked

Viewed 46 times

-2

Hello folks wanted that my scroll function was disabled for mobiles, ie will only be active if the width of the screen is 1200px up.

$(window).scroll(function () {

// Movimento primeiro box vermelho
if ($(this).scrollTop() >= $("#box_img1").offset().top - $("#marcador_menu").offset().top) {
   $("#box_img1").stop().animate({"margin-right":"70px", "opacity":"1"},600);
   $("#box_text1").stop().animate({"margin-left":"100px", "opacity":"1"},600);
} else {
}
if ($(this).scrollTop() >= $("#box_img2").offset().top - $("#marcador_menu").offset().top) {
   $("#box_img2").stop().animate({"margin-left":"100px", "opacity":"1"},600);
   $("#box_text2").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
} else {
}
if ($(this).scrollTop() >= $("#box_img3").offset().top - $("#marcador_menu").offset().top) {
   $("#box_img3").stop().animate({"margin-right":"50px", "opacity":"1"},600);
   $("#box_text3").stop().animate({"margin-left":"100px", "opacity":"1"},600);
} else {
}
if ($(this).scrollTop() >= $("#box_img4").offset().top - $("#marcador_menu").offset().top) {
   $("#box_img4").stop().animate({"margin-left":"100px", "opacity":"1"},600);
   $("#box_text4").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
} else {
}
if ($(this).scrollTop() >= $("#box_img5").offset().top - $("#marcador_menu").offset().top) {
   $("#box_img5").stop().animate({"margin-right":"50px", "opacity":"1"},600);
   $("#box_text5").stop().animate({"margin-left":"100px", "opacity":"1"},600);
} else {
}
});
javascript jquery

3 answers

2


SOLUTION

$(window).scroll(function(){
    if ($(window).width() >= 1200){ 
        // do something here
    }   
});

2

Enter your code within the following if:

if (window.innerWidth >= 1200) {
    //Seu code aqui =]
}

The same functionality above, but this time in Jquery along with your code:

if ($(window).width() >= 1200) {
 $(window).scroll(function () {

  // Movimento primeiro box vermelho
  if ($(this).scrollTop() >= $("#box_img1").offset().top - $("#marcador_menu").offset().top) {
     $("#box_img1").stop().animate({"margin-right":"70px", "opacity":"1"},600);
     $("#box_text1").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else}
  if ($(this).scrollTop() >= $("#box_img2").offset().top - $("#marcador_menu").offset().top) {
     $("#box_img2").stop().animate({"margin-left":"100px", "opacity":"1"},600);
     $("#box_text2").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
  } else {}
  if ($(this).scrollTop() >= $("#box_img3").offset().top - $("#marcador_menu").offset().top) {
     $("#box_img3").stop().animate({"margin-right":"50px", "opacity":"1"},600);
     $("#box_text3").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else {}
  if ($(this).scrollTop() >= $("#box_img4").offset().top - $("#marcador_menu").offset().top) {
     $("#box_img4").stop().animate({"margin-left":"100px", "opacity":"1"},600);
     $("#box_text4").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
  } else {}
  if ($(this).scrollTop() >= $("#box_img5").offset().top - $("#marcador_menu").offset().top) {
     $("#box_img5").stop().animate({"margin-right":"50px", "opacity":"1"},600);
   $("#box_text5").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else {}
 });
}

As additional information another if Interesting for mobile is comparing if there is touch on the device:

if(('ontouchstart' in window)){
   //O code aqui sera executado apenas em dispositivos que possuem Touch Screen
}

1

You could do it this way:

$(window).resize(function() {

  if ($(window).width() > 1200) {
    $(window).scroll(myFunction);
  } else {
    $(window).unbind('scroll');
  }

});

var myFunction = function() {

  // Movimento primeiro box vermelho
  if ($(this).scrollTop() >= $("#box_img1").offset().top - $("#marcador_menu").offset().top) {
    $("#box_img1").stop().animate({"margin-right":"70px", "opacity":"1"},600);
    $("#box_text1").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else {
  }
  if ($(this).scrollTop() >= $("#box_img2").offset().top - $("#marcador_menu").offset().top) {
    $("#box_img2").stop().animate({"margin-left":"100px", "opacity":"1"},600);
    $("#box_text2").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
  } else {
  }
  if ($(this).scrollTop() >= $("#box_img3").offset().top - $("#marcador_menu").offset().top) {
    $("#box_img3").stop().animate({"margin-right":"50px", "opacity":"1"},600);
    $("#box_text3").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else {
  }
  if ($(this).scrollTop() >= $("#box_img4").offset().top - $("#marcador_menu").offset().top) {
    $("#box_img4").stop().animate({"margin-left":"100px", "opacity":"1"},600);
    $("#box_text4").stop().animate({"margin-right":"-50px", "opacity":"1"},600);
  } else {
  }
  if ($(this).scrollTop() >= $("#box_img5").offset().top - $("#marcador_menu").offset().top) {
    $("#box_img5").stop().animate({"margin-right":"50px", "opacity":"1"},600);
    $("#box_text5").stop().animate({"margin-left":"100px", "opacity":"1"},600);
  } else {
  }

});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.