html - Sticky Position: Header scrolled away after a while -
on website have made <nav> stick top, sticks few seconds / pixels when scroll down, gets scrolled away, please see code snippet below , scroll down. want nav stick top time when scroll down, except when <header> visible.
html
<!doctype html> <html> <head> <title>danis website</title> <link href="reset.css" type="text/css" rel="stylesheet"> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="wrapper"> <header> <h1>danis website</h1> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="rezepte.html">rezepte</a></li> <li><a href="zutaten.html">zutaten</a></li> </ul> </nav> <main> main main main<!-- in code snippet below here more lines of text, here if have omitted lines better readability. </main> <footer> footer </footer> </div> </body> </html> css
*{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; position: sticky; top: 100px; } nav{ flex: 0 0 50px; background-color: dodgerblue; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } *{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; } nav{ flex: 0 0 50px; background-color: dodgerblue; position: sticky; top: 0px; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } <div id="wrapper"> <header> <h1>danis website</h1> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="rezepte.html">rezepte</a></li> <li><a href="zutaten.html">zutaten</a></li> </ul> </nav> <main> main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main </main> <footer> footer </footer> </div>
i believe might because of height: 100% on body. when content long, body doesn't wrap around entire content instead inherits browser viewport height. hence when scroll past bottom of body, nav stops sticking.
on side note though don't think should using position: sticky yet. has less browser 20% support. http://caniuse.com/#feat=css-sticky
solution: substitute height: 100%; min-height: 100%; in #wrapper. when removing height: 100%; page smaller viewport on pages content doesn't fill viewport
Comments
Post a Comment