Separate scrolling of left hand categories from main shopping page

Site URL: https://www.extremegear.org/shop

Hi Everyone,

I am not sure how to best describe what I want to change on my website, so please bare with me. When I am on the top of this page https://www.extremegear.org/shop the left hand categories section is visible up to the "Hammers" category. When I scroll down a little, I can see more products and categories that are below "Hammers". The second photo shows I can see up to "Ice Axes". But when I scroll a little more, one the "shop for gear" (blue circle) header is gone, the categories no longer scroll down until I scroll through all of my 600+ products. This happens on all of my pages. Can I make the "category" area scroll independent of the products?

Thanks for any suggestions.

John

I think your best bet is just to remove the position:sticky; property, and allow it to act like a normal part of the page. Adding a scroll to a sticky element isn't a great idea, and the bottom categories will still be hidden. This does mean that the categories get hidden when you scroll past, but I would suggest that that is a better user experience than what you have. Alternatively, grouping them so you have fewer categories might be a solution.

Try one of these custom CSS (not both):

undo sticky

@media screen and (min-width: 768px)
.products.collection-content-wrapper .nested-category-tree-wrapper {
    position: initial !important;
    top: initial;
}

OR add scroll

@media screen and (min-width: 768px)
.products.collection-content-wrapper .nested-category-tree-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 200px;
    max-height: calc(100vh - 200px);
    overflow: scroll;
}