JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <img id="background" src="https://googledrive.com/host/0ByYXtpCkJ4pcazdjX2h0eFJOR2M/Images/Geometric-Multicolor_www.FullHDWpp.com_.jpg" />
    <!--CENTER LOGO-->
    <!--******************NAVIGATION BAR*********************-->
    <div id="navigationbar"> <a href="#topofpage"><img id="logo" src="https://googledrive.com/host/0ByYXtpCkJ4pcazdjX2h0eFJOR2M/Images/DG%20Logo.png" /></a>

        <div id="top">⥣ Top ⥣</div>
        <!--LEFT SIDE OF NAVIGATION BAR-->
        <div id="menuleft"> <a href="#aboutheader"><div class="menuitem" id="about">about</div></a>

            <p id="divider">|</p> <a href="#projectsheader"><div class="menuitem" id="projects">projects</div></a>

        </div>
        <!--RIGHT SIDE OF NAVIGATION BAR-->
        <div id="menuright"> <a href="#mediaheader"><div class="menuitem" id="media">media</div></a>

            <p id="divider">|</p> <a href="#contactheader"><div class="menuitem" id="contact">contact</div></a>

        </div>
    </div>
    <!--******************CONTENT**********************-->
    <div class="hello">
        <div id="sentence"><em><span id="welcome">Welcome.</span></em> 
            <br /><b><span id="name">❖&nbsp;&nbsp;&nbsp;My name is Derek Goss.&nbsp;&nbsp;❖</span></b>

        </div>
        <div id="subtitle">I'm a 9th grader who <span id="fillin"></span>

        </div>
    </div>
    <div class="content">
        <div id="instructions"><em>Scroll down or click a section at the top to navigate</em>

            <br />
            <br />⥥ ⥥ ⥥</div>
        <div class="infobox">
             <h1 id="aboutheader">about</h1>

            <p>sdkjbsdkjbsdkjbaskj</p>
        </div>
        <div class="infobox">
             <h1 id="projectsheader">projects</h1>

            <p>sdkjbsdkjbsdkjbaskj</p>
        </div>
        <div class="infobox">
             <h1 id="mediaheader">media</h1>

            <p>sdkjbsdkjbsdkjbaskj</p>
        </div>
        <div class="infobox">
             <h1...

CSS

/*BACKGROUND*/
 body {
    min-height: 100%;
    min-width: 1080px;
}
#background {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1080px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    z-index: -2;
    top: 0;
    left: 0;
}
/*CENTER LOGO*/
 #logo {
    width: 200px;
    height: auto;
    position: fixed;
    margin-left: 400px;
    margin-top: -50px;
}
#top {
    position: fixed;
    margin-left: 430px;
    margin-top: 150px;
    font-family: footerfont;
    font-size: 2em;
    color: #fff;
    opacity: 0;
}
/*NAVIGATION BAR*/
 #navigationbar {
    height: 100px;
    width: 1000px;
    position: fixed;
    margin-top: 80px;
    left: 220px;
    background-color: #000;
    overflow: auto;
    opacity: 1;
}
/*CONTAINER FOR LEFT SIDE OF NAVIGATION BAR*/
 #menuleft {
    height: inherit;
    width: 370px;
    float: left;
    margin-left: 18px;
}
/*CONTAINER FOR RIGHT SIDE OF NAVIGATION BAR*/
 #menuright {
    height: inherit;
    width: 370px;
    float: right;
    margin-right: 18px;
}
/*BASIC STYLE FOR ANY MENU ITEM*/
 .menuitem {
    font-family: menufont;
    font-size: 1.5em;
    display: inline-block;
}
#about {
    margin-top:32px;
    margin-left: 30px;
    color: rgb(255, 118, 0);
    transition: color 0.25s linear;
}
#about:hover {
    color: #fff;
}
#projects {
    margin-left: 30px;
    color: rgb(255, 80, 104);
    transition: color 0.25s linear;
}
#projects:hover {
    color: #fff;
}
#media {
    margin-top:32px;
    margin-left: 30px;
    color: rgb(191, 142, 255);
    transition: color 0.25s linear;
}
#media:hover {
    color: #fff;
}
#contact {
    margin-left: 30px;
    color: rgb(255, 235, 0);
    transition: color 0.25s linear;
}
#contact:hover {
    color: #fff;
}
/*DIVIDING LINE SEPARATING MENU ITEMS*/
 #divider {
    display: inline-block;
    font-family: menufont;
    font-size: 1.5em;
    margin-left:25px;
    color:...

JavaScript

$(function () {
    var headertop = $("#aboutheader").offset().top;
    var hoveractive = false;
    var fadeout = true;
    var fadein = true;

    $(window).scroll(function () {
        if ($(window).scrollTop() > headertop && fadeout) {
            hoveractive = true;
            fadeout = false;
            fadein = true;
            $("#navigationbar").fadeTo(1000, .35);
        }
        if ($(window).scrollTop() <= headertop && fadein) {
            hoveractive = false;
            fadein = false;
            fadeout = true;
            $("#navigationbar").fadeTo(1000, 1);
        }
    });

    $("#navigationbar").hover(function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, 1);
        }
    }, function () {
        if (hoveractive) {
            $("#navigationbar").fadeTo(500, .35);
        }
    });
});