JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div>
    <header>
        header
        <a href>scroll to nav</a>
    </header>
    
    <nav>
        nav
    </nav>
    
    <section>
        content
    </section>
</div>

CSS

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


/* -- wichtig -- */
.fixed nav {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    right: 0 ;
}
.fixed section {
    /** Höhe + Padding * 2 = 50 + 5 * 2 */
    padding-top: 60px ;
}

JavaScript

e.preventDefault();/**
 * Dynamische Fixierung der Navigation am Seitenkopf.
 */
;(function($){
    $(document).ready(function(){
        /** Ursprüngliche Position merken */
        var navTop = $('nav').position().top;
        
        /** Auf das Scrollereignis reagieren */
        $(window).on('scroll',function(){
            if($(window).scrollTop() >= navTop) {
                $('div').addClass('fixed');
            } else {
                $('div').removeClass('fixed');
            }
        });
        
        $('a').on('click',function(e){
            e.preventDefault();
            //$(window).scrollTop(navTop);
        });
    });
})(jQuery);