JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="navigation">
    <div class="wrapper">
        <div class="logo"></div>
        <div id="access">
            <div class="floatRight">Icon</div>
        </div>
    </div>
</div>
<div id="minimal">
    <div class="wrapper">
        <div class="rocket"></div>
        <div id="access">Icon</div>
    </div>
</div>
<div id="introduction"></div>
<div id="content" class="hfeed">
    <div class="hideme red">Fade In</div>
    <div class="hideme bue">Fade In</div>
    <div class="hideme green">Fade In</div>

  
</div>

CSS

body {
    margin:0;
    padding:0;
}
#navigation {
    height:160px;
    /*background-color: #ed2f35;*/
    width: 100%;
    z-index: 999999;
    position: fixed;
}
#wrapper {
    clear:both;
    margin: 0px auto;
    max-width: 1144px;
}
.logo {
    border:1px solid blue;
    background: url("http://littlerocket.co.nz/wp-content/themes/twentyeleven/images/logo.png");
    background-repeat: no-repeat;
    z-index:999999;
    margin-top: 25px;
    margin-left: 20px;
    display:block;
    float:left;
    height:106px;
    width: 136px;
    transition: background 0.5s linear 0s;
}
#access {
    margin: 0;
    border:1px solid black;
    width: 500px;
    float: right;
}
.floatRight {
    float: right;
}
#minimal {
    background:#fff;
    height: 110px;
    position: fixed;
    width: 100%;
    z-index: 0;
    transition: all 0.2s linear 0s;
    z-index:55;
    display:none;
}
.rocket {
    border:1px solid blue;
    background: url("http://littlerocket.co.nz/wp-content/themes/twentyeleven/images/rocket-svg.svg");
    background-repeat: no-repeat;
    z-index:999999;
    margin-top: 30px;
    margin-left: 20px;
    display:block;
    float:left;
    height:50px;
    width: 50px;
    transition: all 0.5s linear 0s;
}
#introduction {
    margin-top:160px;
    width: 100%;
    height: 800px;
    margin-top: -160px;
    display: table;
    position: fixed;
    background-color: #333;
    z-index:22;
}
#content {
    animation: 2s ease 0s normal forwards 1 intro-content;
    top: 640px;
    z-index: 30;
    height:100%;
    width:100%;
    position:relative;
    background: none repeat scroll 0 0 rgb(255, 255, 255);
}
.hideme
{
    opacity:0;
}

.red { height:700px; width:100%; background-color: red; }
.bue { height:700px; width:100%; background-color: blue; }
.green { height:700px; width:100%; background-color: green; }

JavaScript

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').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'},1500);
                    
            }
            
        }); 
    
    });
    
});

$(window).load(function () {
    var fixed = false;

    $(document).scroll(function () {
        if ($(this).scrollTop() > 640) {
            if (!fixed) {
                fixed = true;
                $('#minimal').fadeIn(100).css({
                    position: 'fixed',
                    display: 'block'
                });
                $('#navigation').slideUp("fast");
                $('#access a').fadeIn("slow").css("margin-top", "30px");
            }
        } else {
            if (fixed) {
                fixed = false;
                $('#minimal').fadeOut(100).css({
      
                    
                    display: 'none'
                });
                $('#navigation').show().css({
                    display: 'block'
                });
                $('#access a').fadeIn("slow").css("margin-top", "60px");
            }
        }
    });
});


$('a').click(function () {
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
    return false;
});