CODEWITHSUNDEEP
csssidebarsticky
Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

Make sidebar menu sticky with scrolling

I would like to have my sidebar menu sticky when scrolling the page. enter image description here

An example of what I want can be found here: https://codepen.io/hexagoncircle/pen/oNLZmvV
An code example of my website can be found here: https://codepen.io/darkinfore/pen/VwdwKKZ
You can see a live demo of my site here: https://ergonj4.joomlademo.nl/over-ergon/organisatie

The sidebar menu should stick under the top menu when scrolling just like the example does.

I tried to use

#scrollspy{
  position: sticky;
  top: 200px;
}

But that didn't work. I can't get my sidebar menu to stick.

Can someone help me figure out how to fix this?

Upvotes: 0

Views: 482

Answers (1)

Camille
Camille

Reputation: 879

Sticky elements can only stick in their direct parent / wrapper. So if you want it works, you have to specify a height on the direct parent of scrollspy :

Screen of the correct parent sticky wrapper

You can use Javascript to get readthis height and set this value on your sticky parent.

document.getElementById('module-365').style.height = document.getElementById('readthis').offsetHeight + 'px' ;

Upvotes: 2

Related Questions