How can I control the mouse scroll event and after that do an animation on the html, body?

Question

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the JQuery event window.scroll . I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.

$(document).on("scroll", function () {

  var lastScrollTop = 0;

  var windowHeight = $(window).scrollTop();

  var seccion1 = $("#seccion1").height();

  var seccion2 = $("#seccion2").offset().top;

  var alturaseccion2 = $("#seccion2").height();

//this function returns in wich section is the user with the scroll
  var localizacion = comprobarSeccion(seccion1, seccion2);


  if (windowHeight > lastScrollTop) {
    // down scroll 

    console.log("scrollabajo");

    if (localizacion == 1) {


      $("html, body").animate({
        scrollTop: $("#seccion2").offset().top

      }, 2);
      $(document).bind("scroll");

    } else if (localizacion == 2) {

      if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {


      } else {


      }

    }



  } else {
    // up scroll 

    console.log("scrollarriba");
  }
  lastScrollTop = windowHeight;



});
´´´

Answer 1

I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below

 $(window).scroll(function () { 
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
             alert("scroll is greater than 500 px)
        } else if(scroll==500){
            alert("scroll has hit 500px");
        }

    });