Search code examples
htmlcssscrollsidebarsticky

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

Solution

  • You 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 (100vh), so it can apply the scroll behavior if the content is larger than the container