How can an element be defined to behave like a sticky element only when the remaining height of the element is greater than a specific size (that I will call sticky container margin)?

How can an element be defined to behave like a sticky element only when the remaining height of the element is greater than a specific size (that I will call sticky container margin)?

I’ve a position: sticky; top: 80px style on the cards, and there’s a heading above the card, that explains what those cards are for, and I want the heading to show up till all the sticky cards are scrolled to the end. That means I don’t want the heading for the cards to scroll up before all cards are scrolled and viewed.

I’m trying to make the breadcrumbs below this header sticky on my website, but I’m encountering an issue. I’ve added CSS code, but when I scroll, there’s a gap between the header and the breadcrumbs. Here’s the website link (http://wp.kaercher-center-matthes.de/) and the CSS code I’ve tried:

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it’s not anymore sticky.