JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<div id="blah">blah</div>
<div id="header-plane">
    <img src="http://wp.ccrcc.org/wp-content/themes/ccrcc/images/plane-1.png" alt="R/C plane" width="400" height="162" />
</div>

CSS

html {
    height: 10000px;
}
#header-plane {
    z-index: 5;
    width: 400px;
    position: fixed;
    right: 250px;
    top: 200px;
}
#blah {
    position: fixed;
    top: 0;
}

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;
}