2

我试图让飞入/飞出效果发生

向下滚动 - 动画

向上滚动动画

获得与 nizo 网站类似的效果

http://nizoapp.com/

我使用了我在 Stackoverflow 上找到的“使用 css 向下滚动时淡入元素”来确定元素是否在屏幕上、在视口中，然后对其进行动画处理。

   $(window).scroll(function () {

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

            var bottom_of_object = $(this).position().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);

            }

        });

    });

效果很好。

我已将其添加到此演示页面，并对其进行了修改。

http://saigonhousefinder.com/potteryone/fadinonscroll.html

（可能活不了多久）

我已经使用 css 过渡来获得我正在寻找的效果。飞入飞出等

然后我发现.....这个功能做同样的事情

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}

反正.......

向下滚动时，我无法让动画工作，飞入。

但是当它们向上滚动时我无法让动画反转

我认为最简单的方法是检测你是否向上滚动，所以我找到了这个方法/函数

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){



  $("#div").fadeIn("slow");
       }
       else {

  $("#div").fadeOut("slow");



       }
       previousScroll = currentScroll;
    });
}());

哪个效果很好，但我无法让它工作。

此时我可以检测到元素何时在屏幕上可见，然后为其添加效果。

我需要它来检测同一个元素何时开始离开屏幕并对其应用另一种效果。

任何有关如何使这项工作的帮助都会很棒

祝你今天过得愉快

4

1 回答 1

1

这是一个非常简洁的演示和一个很棒的概念！我玩弄了一些代码，看来你快到了。您需要检测屏幕顶部何时与元素顶部相遇，因此仅在页面加载时计算一次偏移量。我添加了一个 20px 的阈值，所以它启动得有点早。让我知道这是否有帮助，可以根据您想要调用它的方式和时间进行调整。这是一个简单的 js fiddle 演示 http://jsfiddle.net/XhAhR/23/

(function () {

  var previousScroll = 0;
  var elemTop = $("#div").offset().top;
  $("#div").fadeOut();

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

   if (currentScroll > previousScroll){
           if(elemTop -20 > currentScroll){
               $("#div").fadeIn("slow");
           }
   }
   else {
       if(elemTop - 20 > currentScroll){
           $("#div").fadeOut("slow");
       }
   }
   previousScroll = currentScroll;
  });
}());
于 2013-09-06T18:30:24.837 回答