HTML5 Position Sticky Couldn't work although i had set top 0

Question

/* site navigation bar */

nav.sitenavigation {
  position: sticky;
  top: 0;
  clear: both;
  text-align: center;
  color: #000000;
  font-size: 1.4em;
  background-color: #f0f8ff;
  margin: 50px auto;
}

nav.sitenavigation p {
  display: inline-block;
  margin: 0.5em;
  padding-right: 5em;
}

nav.sitenavigation a:link,
nav.sitenavigation a:visited {
  text-decoration: none;
  color: #000000;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: #33cc00;
}
p{
margin: 2000px;
}

<body>
  <div>
    <nav class="sitenavigation">
      <p><a href="index.html">&#127968; Home</a></p>
      <p><a href="listing.html">&#x1f4d6; Item Listing</a></p>
      <p><a href="order.html">&#128722; Your Order</a></p>
      <p><a href="contactus.html">&#x260E; Contact Us</a></p>
    </nav>
  </div>
  <p>ABC
  </p>
</body>

I have tried many ways to let my navigation bar to be stick on top but it is not. I have reset the HTML style to be overflow: auto. It shows like position: relative instead of position: sticky

The snippet does not demonstrate the problem. But `position:sticky` makes an element only sticky as long as its parent element is visible on the screen. As an example, I made [this fiddle](https://jsfiddle.net/MrLister/txc4Luyp/) that shows the stickyness working fine as long as some of the div content is visible, but it scrolls up with the div after that. Is that what happens in your case? — Mr Lister, Nov 21 '18 at 08:34
@MrLister there is an extra div in his code which create the issue, the element is sticking to that div but the height of the div is also defined by the sticky element so there is no room for the sticky effect. — Temani Afif, Nov 21 '18 at 09:05
@TemaniAfif Thanks a lot. It's the div causing the sticky in nav not working — Ziriki, Nov 21 '18 at 09:19

score 2 · Answer 1 · answered Nov 21 '18 at 08:31

2

position: sticky works on when height is enough long.

Can you make div (which in just below on body) to div style="height: 1000px;"?

In my case, that style works well.

answered Nov 21 '18 at 08:31

wormwlrm

116
5

I have added the margin 2000px to demonstrate the problem – Ziriki Nov 21 '18 at 08:48

score 0 · Answer 2 · answered Nov 21 '18 at 08:42

Set height for a relative container

/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
    position: sticky;
    top: 0;
    clear: both;
    text-align: center;
    color: #000000;
    font-size: 1.4em;
    background-color: #f0f8ff;
    margin: 50px auto;
}
nav.sitenavigation p{
     display: inline-block;
     margin: 0.5em;
     padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
     text-decoration: none;
     color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
     color: #33cc00;
}

<body>

        <nav class="sitenavigation">
                <p><a href="index.html">&#127968; Home</a></p>
                <p><a href="listing.html">&#x1f4d6; Item Listing</a></p>
                <p><a href="order.html">&#128722; Your Order</a></p>
                <p><a href="contactus.html">&#x260E; Contact Us</a></p>
        </nav>

      </body>

score -1 · Answer 3 · answered Nov 21 '18 at 08:30

The position relative you're seeing would be correct as per definition:

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). https://www.w3schools.com/Css/css_positioning.asp

If your navigation is supposed to stick on top, regardless of the scrolling, you most probably want to use position: absolute instead

HTML5 Position Sticky Couldn't work although i had set top 0

3 Answers3