Question

http://jsfiddle.net/asif097/AzRtC/3

As you can see there are two buttons when the 1st button is clicked some jquery functions are beeing run (see bellow the red div, more contents are being loaded), same happens for the second button.

Now I wanted to use jquery scroll function instead of the click function (to run those jquery animation same as the click) .

Tried this one but doesn’t work. Any one one to fix the code?

Note: I’m new to jquery.

 $(window).scroll(function() {
    if ($(this).scrollTop() > 1000) { // instead of the click button#go tried bellow code
      $(".more").css("display", "block");
      $("#block1").removeAttr('style');
      $("#block2").removeAttr('style');
      $("#block3").removeAttr('style');
      $("#block4").removeAttr('style');
      $("#block5").removeAttr('style');
      $("#block1").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block2").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');;

      $("#block3").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');

      $("#block4").css('display', 'block').animate({
          opacity: 1,
          marginTop: "-208px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

      $("#block5").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          marginRight: 0
          }, 2000, 'easeOutExpo');

    }

    else if ($(this).scrollTop() > 1000) { // instead of the click button#go2 tried bellow code
      $(".more2").css("display", "block");
      $("#block6").removeAttr('style');
      $("#block7").removeAttr('style');
      $("#block8").removeAttr('style');
      $("#block9").removeAttr('style');
      $("#block10").removeAttr('style');
      $("#block6").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 1300, 'easeOutExpo');

      $("#block7").css('display', 'block').animate({
          opacity: 1,
          marginTop: 0,
          top: 0,
          }, 2000, 'easeOutExpo');

      $("#block8").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');

      $("#block9").css('display', 'block').animate({
          opacity: 1,
          marginTop: "-208px",
          }, 2000, 'easeOutExpo');

      $("#block10").css('display', 'block').animate({
          opacity: 1,
          marginTop: "13px",
          }, 2000, 'easeOutExpo');
    }

    else {
        return false;
    }
});

Answer 1

The only problem with your code is that $(this).scrollTop() will never be larger than 1000.

According to the define of .scrollTop()

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

So it will be different when scroll to the bottom, while the height of window is different.

So I use $(this).scrollTop()+$(window).height() instead of $(this).scrollTop(), it will almost be the same.

Here is jsfiddle. http://jsfiddle.net/AzRtC/5/