Question

正如您所看到的，当单击第一个按钮时有两个按钮正在运行一些jquery函数（请参阅下面的红色div，正在加载更多内容），第二个按钮也是如此。

现在我想使用jquery滚动函数而不是click函数（运行那些与点击相同的jquery动画）。

试过这个，但不起作用。任何一个修复代码？

注意：我是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

您的代码唯一的问题是$(this).scrollTop()永远不会大于1000。

根据.scrollTop()的定义

垂直滚动位置与可滚动区域上方的视图中隐藏的像素数相同。如果滚动条位于最顶部，或者元素不可滚动，则此数字将为0。

因此滚动到底部时会有所不同，而窗口的高度则不同。

所以我使用$(this).scrollTop()+$(window).height()代替$(this).scrollTop()，它几乎是相同的。

这是jsfiddle。 http://jsfiddle.net/AzRtC/5/

Jquery Scroll功能在这里不起作用

1 个答案: