Trying to get the catalog section to stick to the bottom of primary navigation. Seems all set up correctly but scrolls right by. Have not been able to use sticky at all so far. Never works.
Sticky is one of the more difficult styles to get working properly but I’ve found that once it’s working it’s easy to adjust.
If the sticky section is intended to be the right-hand column (with both Catalog and Quick Links) then there’s just a single missing style on the parent “Secondary nav” container. Changing that from
position: static to
position: sticky is all that’s needed to get this working:
Since there’s already a top value set within the position properties (100px) the “Secondary nav” element is sticking once the element is 100px away from the top of the screen. If you want the element to stick at a different point, just modify the value as needed.
After writing out that first part I noticed that you’ve actually got a separate element that contains Catalog (shown above the Collection List column) and that one may be the actual element you’re looking to stick—especially considering this one had
position: sticky applied to it already
The reason this isn’t working the same as the other element is because of the lack of space for this element to stick. I like to imagine that sticky elements are moving objects that require a confined “track” that it slides within. Without that track—in this case, the vertical space below the element—an element with
position: sticky will have no where to move and it will appear static.
In order to get this working as intended there are a couple of changes we need to make and I figured it would be easier to go over them all with a quick video. Thankfully there aren’t any major structural changes needed, just some styles on a few elements (along with some suggestions for your layout):
Let me know if you run into any issues and I’d be happy to help out