JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<div class="nav">
    <div class="home"><a href="#home">Home</a>

    </div>
    <div class="about"><a href="#about">About</a>

    </div>
    <div class="work"><a href="#work">Work</a>

    </div>
    <div class="contact"><a href="#contact">Contact</a>

    </div>
</div>
<div data-menu="" class="slides slide1"></div>
<div data-menu="" class="slides slide2">
    <div class="fader">Hey! this is slide two</div>
</div>
<div data-menu="" class="slides slide3"></div>
<div data-menu="" class="slides slide4"></div>

CSS

@charset"utf-8";

/* CSS Document */
 h1, h2, h3, h4, h5 {
    font-family:'Roboto Condensed', sans-serif;
}
body, td, th {
    font-family:"Roboto Condensed", sans-serif;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color:#FFF;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}
.fadeIn {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.fadeOut {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.fadeIn {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.fadeOut {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.slides {
    width:100%;
    height:1000px;
    margin:0;
}
.slide1 {
    background-color:#0090ff;
    position:relative;
}
.slide2 {
    background-color:#FF2019;
    position:relative;
}
.slide3 {
    background-color:#C9CC14;
    position:relative;
}
.slide4 {
    background-color:#AFB209;
    position:relative;
}
.home {
    position:relative;
    top:5px;
    left:0;
    display:block;
}
.about {
    position:relative;
    top:10px;
    left:0px;
    display:block
}
.work {
    position:relative;
   ...

JavaScript

function scrollTo(to, time) {
    var start = new Date().getTime(),
        begin = document.body.scrollTop,
        end = to.offsetTop,
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            document.body.scrollTop = (begin + step * (end - begin));
            if (step == 1) clearInterval(timer);
        }, 25);
}

document.addEventListener("DOMContentLoaded", function() {
   
    alert("fdkjdfh");
  
});

//setting browser height
/*var getHeight = window.innerHeight;

//set heights function
var setHeights = function(){
	for (var i=0, len = slide.length; i<len; i++ ){
	slide[i].style.height = getHeight +'px';
        if(slide[0] >= window.pageYOffset){ 
            console.log("yes" + window.pageYOffset);
            }
    }
};//end function*/

window.addEventListener("scroll", function () {
    var st = window.pageYOffset;
    var link1 = document.querySelector(".home");
    var link2 = document.querySelector(".about");
    var link3 = document.querySelector(".work");
    var link4 = document.querySelector(".contact");
    var mrFade = document.querySelector(".fader");
    console.log(st);

    //home 
    link1.style.top = (st / 50) + 'px';

    if (st > link1.offsetTop + 912) {
        link1.style.display = "none";
    } else {
        link1.style.display = "block";
    }

    //about	
    link2.style.top = (st / 50) + 'px';

    if (st > link2.offsetTop + 1790) {
        link2.style.display = "none";
    } else {
        link2.style.display = "block";
    }
    //work	
    link3.style.top = (st / 50) + 'px';

    if (st > link3.offsetTop + 2926) {
        link3.style.display = "none";
    } else {
        link3.style.display = "block";
    }
    //contact	
    link4.style.top = (st / 50) + 'px';

    if (st > link4.offsetTop + 3700) {
        link4.style.display = "none";
    } else {
        link4.style.display = "block";
    }










    //fader
    if (st > mrFade.offsetTop + 10)...