Fixed plane demo

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进行了很多更改，所以当我开始在这里输入列表时，你可以看到更正的小提琴：

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 Console中我遇到以下脚本错误：

SyntaxError: missing ) after argument list

$(window).scroll(function () {

看起来您错过了关闭第一个文档就绪功能：

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

div向下移动页面向下滚动向下滚动

2 个答案:

Fixed plane demo

的Javascript