Bewegliche Navigation an der Unterseite, die dort bei Fenstergröße bleibt

Question

Ich möchte mir eine kleine Website machen und bin fast komplett neu in dieser Welt (habe ein paar Sachen in der Schule gemacht und weiß wie man eine einfache Seite erstellt, aber nichts besonderes). Ich wollte dich fragen, wie man unten eine bewegliche Navigation macht, die dort bei Fenstergröße bleibt.

Ich habe es schon selbst versucht, aber seit ich bootstrap und materializecss benutze, denke ich, dass ich ein paar nutzlose Zeilen im CSS geschrieben habe und nicht wirklich zeigen kann, was ich bisher gemacht habe. Ich habe etwas mit absoluter Positionierung ausprobiert, aber es schraubte sich herum, wenn Leute die Chrom-Browser-Lesezeichenleiste abschalten, also wechselte ich wieder zu Relativ.

Lange Rede kurzer Sinn, ich möchte wirklich auf dieser Website eine navbar wie haben: http://www.reverse-magazine.com/

Answer 1

Dies sollte man losgeht:

https://jsfiddle.net/f26eudd7/2/

$(document).ready(function() { 
 
    var navbar_el = $('.navbar'); 
 
    var navbar_top = navbar_el.offset().top; 
 
    
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > navbar_top) { 
 
     navbar_el.addClass('sticky'); 
 
    } else { 
 
     navbar_el.removeClass('sticky'); 
 
    } 
 
    }); 
 
    
 
    $(window).resize(function() { 
 
    navbar_top = navbar_el.offset().top; 
 
    }); 
 
});

html,body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.full-height { 
 
    height: 100% 
 
} 
 

 
header { 
 
    position: relative; 
 
    display: block; 
 
    background-image: url('http://placehold.it/1920x1080'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.navbar { 
 
    background: #ffffff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 65px; 
 
} 
 

 
.navbar.sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 100; 
 
} 
 

 
#content { 
 
    background: #ff0000; 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="full-height"> 
 
    <nav class="navbar"> 
 
    Your navbar 
 
    </nav> 
 
</header> 
 

 
<div id="content"> 
 
    Your content 
 
</div>