Question

我目前正在使用以下内容为我网站上的某些容器滚动动画淡入淡出，但是，由于我的一些容器有一个很大的高度，有没有办法改变它，所以当它的底部消失时它会消失。窗口位于容器的中心而不是容器的底部？或者，有没有办法按像素指定？

$(window).scroll(function () {

    /* Check the location of each desired element */
    $('.container').each(function (i) {

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if (bottom_of_window > bottom_of_object) {

            $(this).animate({
                'opacity': '1'
            }, 500);

        }
    });
});

Answer 1

这样的事情？

$(window).scroll(function () {

  /* Check the location of each desired element */
  $('.container').each(function (i) {

      var top_of_object = $(this).offset().top;
      var middel_of_window = $(window).scrollTop() + ($(window).height()/2);

      /* If the object is completely visible in the window, fade it in */
      if (middel_of_window > (top_of_object + 300)) {

          $(this).animate({
               'opacity': '1'
          }, 500);

      }
   });
});

希望它对你有所帮助。

淡入滚动 - 容器的中心

1 个答案: