div 在页面向下滚动时移出，在向下滚动时移入

Question

我已经很接近完成我想要的工作了。

我有一架飞机会在页面滚动时飞出屏幕（右：0，不透明度：0）。 理想情况下，在页面向下滚动 170 像素之前，div 不会开始动画。

网站：http://wp.ccrcc.org/

当页面向上滚动时，距离顶部不到 300 像素时，平面会从屏幕最左侧飞回原始位置。我想我已经在我的 JSFiddle (http://jsfiddle.net/VyU97/198/) 代码中完成了大部分工作，但它在 Wordpress 网站上不起作用：

    jQuery(document).ready(function () {
    function flyOut() {
        var previousScroll = 0;
        var top = $(window).scrollTop();

        jQuery(window).scroll(function () {
            var currentScroll = $(this).scrollTop();
            if (currentScroll > previousScroll) {
                //            if (top > 170) {
                jQuery('#header-plane').animate({
                    right: '0',
                    opacity: 0
                }, 'slow', function () {});
                //            }
            } else {
                if (top < 300) {
                    jQuery('#header-plane').stop(true).animate({
                        right: '1000',
                        opacity: 0
                    }, 10, function () {
                        jQuery(this).animate({
                            right: '250',
                            opacity: 1
                        }, 1000, function () {});
                    });
                }
            }
            previousScroll = currentScroll;
        });
    }
}
$(window).scroll(function () {
    flyOut();
});

Answer 1

对 JS 进行了很多更改，因此当我开始在此处输入列表时，您可以看到更正后的 Fiddle：

Fixed plane demo

更改细分：

• $(window).scroll(function() { flyOut(); }); 是多余的 - 浓缩为 $(window).scroll(flyOut);
• 需要使用指定给每个 offScreen 用于向下滚动和动画用于向上滚动的变量来防止动画重新播放。
• previousScroll 在每次滚动回 0 时都会被覆盖，因此向上滚动动画永远不会触发。
• var top = $(window).scrollTop() 与 var currentScroll = $(this).scrollTop() 相同，因此消除了额外的变量。

Javascript

var animated = false,
    offScreen = false,
    previousScroll = 0;
$(window).scroll(flyOut);

function flyOut() {
    var top = $(window).scrollTop();
    if (top > previousScroll) {
        if (top > 170 && offScreen === false) {
            animated = false;
            offScreen = true;
            jQuery('#header-plane').animate({
                right: 0,
                opacity: 0
            }, 'slow');
        }
    } else {
        if (top < 300 && animated === false && offScreen === true) {
            animated = true;
            offScreen = false;
            jQuery('#header-plane').animate({
                right: '1000px',
                opacity: 0
            }, 10, function () {
                jQuery(this).animate({
                    right: '250px',
                    opacity: 1
                }, 1000);
            });
        }
    }
    previousScroll = top;
}

Answer 2

在 WP 网站上，在 Firebug 控制台中出现以下脚本错误：

SyntaxError: missing ) after argument list

$(window).scroll(function () {

您似乎错过了关闭您的第一个文档准备功能：

jQuery(document).ready(function () {} );