Hallo,
ich habe ein Menü gebaut und möchte dieses nun unten am Bildschirm positionieren, es soll dann mit hochscrollen und sich oben fest verankern. Kann ich das nur mit HTML und CSS umsetzen? Ich finde einfach keine Lösung. Kann mir jemand weiter helfen. Dankeschön.
Code
<!doctype html>
<html lang="de">
<head>
<title>
Sticky Navigation
</title>
<style>
*{
margin:0;
padding:0;
}
body{
min-height:100vh;
background:green;
text-align:center;
}
header{
background:blue;
color:white;
height:calc(100vh - 100px);
/*height 100vh würde die Navigation unterhalb vom header schieben beim Seiten start*/
font-size:300px;
}
nav ul,nav li{
list-style:none;
}
nav{
height:100px;
background:red;
position:sticky;
top:0;
width:100%;
color:white;
font-size:90px;
margin-top:10px;
}
main{
height:100vh;
background:darkgoldenrod;
font-size:100px;
}
footer{
height:100px;
background:black;
color:white;
font-size:80px;
}
</style>
</head>
<body>
<header>
BILD
</header>
<nav>
<ul>
<li>
<a>NAVIGATION</a>
</li>
</ul>
</nav>
<main>
CONTENT
</main>
<footer>
FOOTER
</footer>
</body>
</html>