JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<header>
    Header
    <a href>scroll to nav</a>
</header>
<nav>
    Navigation
</nav>
<section>
    Content
</section>

CSS

/* -- unwichtig -- */
* { margin: 0 ; padding: 0 ; border: 0 none ; }
header { height: 500px ; }
header a { float: right ; }
nav { height: 70px ; background-color: #ccc ; }
section { height: 1000px ; }
header, section { background-color: #eee ; }
body * { padding: 5px ; }

/* -- wichtig -- */
.fixed-nav nav {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    right: 0 ;
}
.fixed-nav section {
    margin-top: 80px ;
}

JavaScript

$(document).ready(function(){
    /** Position der Navigation merken */
    var navTop = $('nav').position().top;
    
    /** Auf das Scrollereignis reagieren */
    $(window).on('scroll',function(){
        var topPos = $(this).scrollTop();
        if(topPos>navTop){
            $('body').addClass('fixed-nav');
        } else {
            $('body').removeClass('fixed-nav');
        }
    });
    
    /** Seite zur Navigation scrollen */
    $('a').on('click',function(e){
        e.preventDefault();
        $('body,html').animate({scrollTop:navTop},1000);
    });
});