position:sticky is not working

css position navbar sticky
Wolfuryo picture Wolfuryo · Aug 6, 2017 · Viewed 45.7k times · Source

I have this HTML code:

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position:sticky and top:0. But this didn't work. I initially thought that firefox is not supporting position:sticky, but that's not the case because I was able to see a working demo of it. I googled about it but found nothing helpful. Anyone knows why this is not working?

Answer

nickspiel picture nickspiel · Dec 11, 2017

For anyone else that comes across this, position sticky was not working for me due to the body element having overflow-x: hidden; set.

Related questions

How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More