Why Is My Position:sticky Not Working?

I want my navigation bar to be sticky, but it's not working. I'm also using some basic jQuery to toggle slidedown for class 'dropmenu'. I also tried position sticky for e

Solution 1:

When you place a position:sticky element inside another element things can get tricky. The sticky element will only travel the height of the parent element so you need to have space in your parent element for the sticky element to move because position: sticky is scoped to the parent element and not the page. The parents overflow and display property can also have an effect. You can try to set the display property of your parent elements to display: intital.

try adding the following:

.center, header{
  display:initial;
}

You can probably set it to inline or inline-block as well depending on your needs.

Here is your snippet with that added along with a couple of other things just for display purposes:

body{
  height:200vh;
}

.center, header{
  display:initial;
}

.dropmenu {
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;
}

navul {
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;
}

navulli {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
}

navullia {
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;
}

div.sticky {
  position: sticky;
  top: 0;
}

<divstyle="height:100px; background:green;"></div><divclass="center"><header><imgclass="headerImage"src="images/header.png"/><hrclass="menu"><divclass="sticky"><aclass="dropmenu"></a><navclass="desktop"><ul><li><ahref="index.php">Sertet</a></li><li><ahref="index.php">Rtretrti</a></li><li><ahref="photos.php">ertettterli</a></li><li><ahref="index.php">retemi</a></li><li><ahref="index.php">Kerterti</a></li></ul></nav></div></header><hrclass="menu"><p>content goes here</p></div>

Solution 2:

Usually, it's because of some parent's "overflow" property.

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won't work:

• overflow: hidden
• overflow: scroll
• overflow: auto

Here's what helped me. Simply copy/paste the following snippet into your browser's console. This will help you to identify all parent elements with overflow property set to something other than visible:

// Change to your STICKY elementlet parent = document.querySelector('.sticky').parentElement;
    
    while (parent) {
        const hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    }

Then it's mostly the issue of setting the right overflow property to the right element.

Solution 3:

For me, I found that overflow: hidden; on a parent container was what was breaking the child's position: sticky;. If overflow on the parent is visible, the sticky starts working.

Solution 4:

It's not the solution to this specific problem, but in case it helps somebody.

I accidentally removed the top CSS rule when refactoring the code, adding it back did the trick for me:

.my-elem {
  position: sticky;
  top: 0;
}