0

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

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

现在我想使用 jquery 滚动功能而不是点击功能（运行那些与点击相同的 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;
    }
});
4

1 回答 1

2

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

根据定义.scrollTop()

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

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

所以我使用$(this).scrollTop()+$(window).height()而不是$(this).scrollTop()，它几乎是一样的。

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

于 2013-02-06T02:34:24.050 回答