CSS return sticky element to normal flow when scrolling past another element

Is it possible to force a sticky element back into normal flow when a certain point is reached?

Right now I’m working on a page with a lot of menu items. I have h2 elements for the names of the meal (“lunch”, “dinner”, etc) and then h3 elements for a subset of menu items categorized within that meal.

<h2>Lunch and Dinner</h2>
<h3>Sandwich Board</h3>
<ul>
    <li>Leo's Meatballs</li>
    <li>Slow Roasted Pulled Brisket or Porkette</li>
    <li>Chicken/Mushroom/Onion BBQ</li>
    <li>Crab Cakes</li>
    <li>Lobster Roll Sliders</li>
    <li>Sausage Spezzato <span class="additional-info">(Sausage, Pepper, Onions In Spaghetti Gravy)</span></li>
    <li>Turkey <span class="additional-info">(White/Dark Meat)</span></li>
</ul>
<h3>Salads</h3>
<ul>
    <li>Red Skin Potato</li>
    <li>Broccoli</li>
    <li>Coleslaw</li>
    <li>Tortellini</li>
    <li>Caprese</li>
    <li>Asian Slaw</li>
    <li>Orzo</li>
    <li>“Old Fashioned” Cucumber</li>
    <li>Chicken</li>
    <li>Tuna</li>
    <li>Egg</li>
    <li>Classic Caesar or Wedge</li>
    <li>Spring Mix <span class="additional-info">(Fresh Green, Cranberries, Walnuts, Feta Cheese with Vinaigrette)</span></li>
    <li>Baby Arugula <span class="additional-info">(Baby Arugula, Grated Parmesan Cheese, Roasted Pine Nuts)</span></li>
</ul>
<h2>Beverages</h2>
<ul>
    <li>Coffee or Hot Tea Service <span class="additional-info">(Complete With Cream, Sugar, Sweeteners Insulated Cups and Stirrer)</span></li>
    <li>Fresh Brewed Unsweetened Ice Tea <span class="additional-info">Complete With Sugar, Sweeteners, and Lemon</span></li>
    <li>Bottled Sodas, Water, Ice Tea, or Lemonade</li>
    <li>Orange, Tomato, or Cranberry Juice</li>
</ul>
h2 {
    background-color: #5A3658;
    color: whitesmoke;
    position: sticky;
    top: calc(4.188rem + 3.063rem);
    z-index: 1;
}
h3 {
    background-color: #914876;
    color: whitesmoke;
    position: sticky;
    top: calc(4.188rem + 3.063rem + 2.313rem);
    z-index: 1;

The number of menu items on a single page makes things sometimes difficult to track, but I found that using sticky elements helps navigate the menu by keeping the menu subsection visible.

My problem is that some sections, like “beverages”, don’t have an associated h3 element. Is it possible to force my sticky h3 elements back into the flow once then next h2 is hit?

1 Like

Good question, I would like to know if someone has an answer to this

I think I figured a solution out. Sticky elements won’t continue to stick once their parent div or section element hits a new parent div/section of the same level.

So, I just wrapped each of the sections inside section elements so that everything from the lunch menu would scroll away when the window scrolls to the dessert or beverage sections.

<section id="lunch">
    <h2>Lunch and Dinner</h2>
    <h3>Sandwich Board</h3>
    <ul>
        <li>Leo's Meatballs</li>
        <li>Slow Roasted Pulled Brisket or Porkette</li>
        <li>Chicken/Mushroom/Onion BBQ</li>
        <li>Crab Cakes</li>
        <li>Lobster Roll Sliders</li>
        <li>Sausage Spezzato <span class="additional-info">(Sausage, Pepper, Onions In Spaghetti Gravy)</span></li>
        <li>Turkey <span class="additional-info">(White/Dark Meat)</span></li>
    </ul>
    <h3>Salads</h3>
    <ul>
        <li>Red Skin Potato</li>
        <li>Broccoli</li>
        <li>Coleslaw</li>
        <li>Tortellini</li>
        <li>Caprese</li>
        <li>Asian Slaw</li>
        <li>Orzo</li>
        <li>“Old Fashioned” Cucumber</li>
        <li>Chicken</li>
        <li>Tuna</li>
        <li>Egg</li>
        <li>Classic Caesar or Wedge</li>
        <li>Spring Mix <span class="additional-info">(Fresh Green, Cranberries, Walnuts, Feta Cheese with Vinaigrette)</span></li>
        <li>Baby Arugula <span class="additional-info">(Baby Arugula, Grated Parmesan Cheese, Roasted Pine Nuts)</span></li>
    </ul>
</section>
<section id="drinks">
    <h2>Beverages</h2>
    <ul>
        <li>Coffee or Hot Tea Service <span class="additional-info">(Complete With Cream, Sugar, Sweeteners Insulated Cups and Stirrer)</span></li>
        <li>Fresh Brewed Unsweetened Ice Tea <span class="additional-info">Complete With Sugar, Sweeteners, and Lemon</span></li>
        <li>Bottled Sodas, Water, Ice Tea, or Lemonade</li>
        <li>Orange, Tomato, or Cranberry Juice</li>
    </ul>
</section>