Sticky Position Breaking JS Event Listener

Question

I'm running into a situation where I'm trying to have a slide in side menu that's also sticky. Whenever I add position: sticky to my menu container, it makes the entire menu display (rather than being shoved off the screen via a negative left value) and the button used to open and close the menu no longer works.

The menu animation works totally fine with the container on absolute by the way. So I'm wondering if I'm missing something in order to have both work, or you just can't do both at all (or at least not the way I'm trying to do it.

Here's a link a codepen I made to show the issue:

Here's a snippet of the css:

#side-menu-container{
  width: 100%;
  max-width: 300px;
  height: 100%;
  min-height: 1000px;
  position: absolute;
  left: 0;
  top: 0;
}

/* if I change the positioning here, the event will work */
#side-menu{
  width: 100%;
  max-width: 330px;
  padding: 1rem 0;
  background: #cccccc;
  position: sticky;
  left: -300px;
  top: 100px;
}

#side-menu ul{
  text-align: center;
}

#side-menu li{
  list-style-type: none;
  margin: 1rem;
}

#side-menu-btn{
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100%;
  background: #cccccc;
  cursor: pointer;
}

#side-menu.side-menu-open{
  left: 0;
}

Oh I should mention I've tried having my main container element, housing both the button and the menu, set to relative, and I've also tried adding z-index:0 and z-index: 99999 to the main container, button, and menu to no avail. Which makes me think there isn't an element covering it.

Kouta Nakano · Accepted Answer

Issue

The reason why #side-menu's negative left value does not work is because position sticky still sets the element in the normal flow. It means that the element cannot go outside the ancestor like absolute / fixed elements.

Solution

The solution is simply set #side-menu-container's left value to -300px, and edit your JS to change #side-menu-container's value instead of #side-menu. This works the way you intend because #side-menu-container is positioned absolute which means it can be located outside the window / the nearest ancestor that is set relative.

The explanation of postion relative from MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

I edited the code.

CSS

#side-menu-container{
  width: 100%;
  max-width: 300px;
  height: 100%;
  min-height: 1000px;
  position: absolute;
  left: -300px;
  top: 0;
}

/* if I change the positioning here, the event will work */
#side-menu{
  width: 100%;
  max-width: 330px;
  padding: 1rem 0;
  background: #cccccc;
  position: sticky;
  top: 100px;
}

#side-menu ul{
  text-align: center;
}

#side-menu li{
  list-style-type: none;
  margin: 1rem;
}

#side-menu-btn{
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100%;
  background: #cccccc;
  cursor: pointer;
}

#side-menu-container.side-menu-open{
  left: 0;
}

JS

const sideMenu = document.querySelector('#side-menu-container');
const sideMenuBtn = document.querySelector('#side-menu-btn');


sideMenuBtn.addEventListener('click', () => {
  sideMenu.classList.toggle('side-menu-open');
});

Sticky Position Breaking JS Event Listener

Answers (2)

Related Questions