'Sticky and scrollable Sidebar sidebar - CSS and HTML

I am working on a Shopify Store but I would like to make a this sidebar sticky and scrollable. The reaso to be scrollable is that when using the position: sticky; css callout the sidebar appears to be very big so it is not visible until the end of the page, then at that moment I would love to make it scrollable so we can filter without having to go to the bottom of the page. I have found something like overflow-y: scroll; but does not work together with the sticky thing. I am sharing some example pics: IMAGE HERE 1 IMAGE HERE 2

htmlcssscrollsidebarsticky


Solution 1:[1]

You might need to add max-height property to the sticky element like so

.side-nav{
  position: sticky;
  overflow-y: scroll;
  max-height: 100vh;
}

now your sidenav has a max-height of the height of your screen, so it can apply the scroll behavior if the content is larger than the container

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammed Sobhi

Related Questions