JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div id="wrapper">
    <div id="unstickyheader"></div>
    <div id="stickyheader"> 
        <div id="home"></div>
        <div class="legende_top">test.com</div>Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.
        <a href="#home"><span class="home_red">home<span></a><span class="grey"> - </span>
 <a href="#disco">discography</a><span class="grey"> - </span>
 <a href="#bio">biography</a><span class="grey"> - </span>
 <a href="#press">press</a><span class="grey"> - </span>
 <a href="#studio">studio</a><span class="grey"> - </span>
 <a href="#contacts">contacts</a> 
    </div>
    <div id="entry" <div class="page"></div>
    <!-- INFORMATIONS -->
    <div class="page">
        <div id="bio" class="ancre"></div>
        <div class="legende">BIOGRAPHY</div>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur. Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius. Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.
        <div class="back"><a href="#home">&#x2191;back to top</a>

        </div>
    </div>
    <div class="page">
        <div id="contacts" class="ancre"></div>
        <div class="legende">CONTACTS</div>Et interdum acciderat,...

CSS

html, body {
    padding:0;
    margin:0;
    font-family: Helvetica, Geneva, Arial sans-serif;
    font-size:14px;
    ;
    color: black;
    line-height: 22px;
    text-transform: lowercase;
    letter-spacing: 2px;
    background-color: white;
    word-spacing: 2px;
}
a:link, a:visited, a:focus {
    color: #dcdedd;
    transition: 0.3s ease;
    text-decoration: none;
    -webkit-transition:color 0.5s ease-in;
    -moz-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition:color 0.5s ease-in;
}
a:hover, a.active {
    color: red
}
#wrapper {
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom: 20px;
}
#entry {
    position: relative
}
.page {
    min-height: 3000px
}
.ancre {
}
#stickyheader {
    width: 100%;
    padding-top:10px;
    top: 0;
    z-index: 1000;
    background-color: white;
    padding-bottom: 10px;
    line-height: 24px;
    position:relative;
}
#unstickyheader {
    height:auto;
    padding-top:20px;
}
.legende_top {
    font-size: 60px;
    color: black;
    line-height: 60px;
}
.legende {
    font-size: 60px;
    color: black;
    line-height: 60px;
}

JavaScript

//-------------------------------------------------- JS SCROLLER HASH ----------------------------------------------------//            
$(document).ready(function () {
    $('a[href^="#"]').bind('click.smoothscroll', function (e) {
        e.preventDefault();

        var target = this.hash,
            $target = $(target);

        var offset;
        if ($('#stickyheader').css('position') == 'relative') {
            offset = $('#stickyheader').outerHeight(true) * 2;
        } else {
            offset = $('#stickyheader').outerHeight(true);
        }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - offset
            //--OFFSET--//
        }, 1500, 'swing', function () {
            window.location.hash = target;
        });
    });
});

//-------------------------------------------------- MENU SCROLL ----------------------------------------------------//         

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() === stickyHeaderTop + 1) {
            $('#stickyheader').hide();
            console.log('p');
        }
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').fadeIn(500).css('position', 'fixed');
            $('#stickyalias').css('display', 'block');
            var mT = $('#stickyheader').css('height');
            $('#stickyheader').next('.post').css('marginTop', mT);
        } else {
            $('#stickyheader').css({
                position: 'relative',
            });
            $('#stickyheader').next('.post').css('marginTop', '0');
        }
    });
});