Sticky Position: Header scrolled away after a while

L

3

10

On my website I have made the <nav> stick to the top, but it only sticks a few seconds / pixels when I scroll down, then it gets scrolled away, please see the code snippet below and scroll down. I want the nav to stick to the top any time when scroll down, except when the <header> is 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 the code snippet below here are more lines of Text, here if have omitted the lines for 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>

Edit: I'm using Firefx 37.0.2 on Arch Linux

Laellaertes answered 14/5, 2015 at 1:31 Comment(0)

E

19

I believe it might be because of height: 100% on your body. When your content is too long, the body doesn't wrap around the entire content instead it just inherits the browser viewport height. Hence when you scroll past the bottom of the body, the nav stops sticking.

On a side note though I don't think you should be using position: sticky just yet. It has less than browser 20% support. http://caniuse.com/#feat=css-sticky

Solution: substitute height: 100%; to min-height: 100%; in #wrapper. When just removing height: 100%; the page is smaller than the viewport on pages where the content doesn't fill the viewport

Enliven answered 14/5, 2015 at 1:48 Comment(3)

That seems to be the problem, the point where it scroll away is right at the end of the viewport. I know that it is not widely supported, but as far as I know in other browser it's just ignored, so there no problem – Laellaertes 14/5, 2015 at 2:0

I am implementing the same for horizontal scroll. I am not having the width 100% property. Even if i set min-width: 100%, still the stick element is getting scrolled away. Can someone help me with this? @danielr1996 – Daradarach 24/5, 2021 at 14:13

This answer strike to my point. Nice man. – Dotti 3/2, 2022 at 15:25

F

0

I have the same sticky problem here.

And as DigitalDouble said, it is the content height problem, but not only caused in body

I found it in my JavaScript code...

Change $(contentElement).style.height = "99px";

to $(contentElement).style.minHeight = "99px";

I hope it helps. =)

Flippant answered 16/9, 2020 at 13:36 Comment(0)

E

0

Just show where I had this problem (run snippet to see why it happens)

html, body {
  /*it takes 100vh always */
  height: 100%;
  border: 1px solid red;
}

.section {
  /*there was a problem, because it also set to 100vh */
  height: 100%;
  /*remove it or change to fit-context*/
}
.header {
  top: 0;
  position: sticky;
  background: green;
}
.main > div {
  height: 200vh;
  border: 1px solid blue;
}

<html>
  <body>
    <section class="section">
      <header class="header">Header</header>
      <main class="main">
        <div>Hello</div>
      </main>
    </section>
  </body>
</html>

Elana answered 21/6 at 11:25 Comment(0)

Recommended topics

Hot tags