Sticky element inside flexbox (not in combination with)

Question

Many similar questions have been posted to try and achieve position sticky with an element that has flex rules applied (e.g. this post is one of many that I tried the answers from), but my aim is to apply position:sticky to a child of a flex element.

I have a two-column layout with a menu on the left. The idea is that when the page is scrolled down, the blue-colored menu stays at the top (although the image above should scroll upwards, leaving just the menu visible in it's place).

However, no matter of which combinations of align-self I apply, the menu still disappears vertically upwards with the image.

If its possible to combine flex with sticky, then I'm hoping there's also a solution for the child element.

Fiddle here using SCSS

.PageContainer {

  .OuterContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    
    .SideOne {
      background-color:#fee;  
      align-self: flex-start /* Solution from https://stackoverflow.com/questions/44446671 */; 
      width: 10em;
      
      .CompanyLogo {
        img {
          width: 100%;
        }
      }
      
      .MyStickMenu {
        border:1px solid blue;
        background-color:#eef;
        position: sticky;
        top: 0;
        
      }
    }

    .SideTwo {
      background-color:#ddd;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}

<div class="PageContainer">

  <div class="OuterContainer">

    <div class="SideOne">

      <div class="CompanyLogo">
        <img src="https://via.placeholder.com/250x100.png" alt="" />
      </div>

      <div class="MyStickMenu">
        <h2>
          Not-so Sticky Menu
        </h2>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Away</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="SideTwo">

      <h1>
        Scrollable page
      </h1>

      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
      
    </div>

  </div>
</div>

score 1 · Accepted Answer · answered Nov 24 '22 at 17:47

1

Your issue is not with the sticky property but with the expectations you have of it. A sticky element is only sticky within its parent and so the Side One's height limits how far the menu can go.

You're going to have to put the Menu as a sibling to the "sides".

Alternatively you could divide Side One into two separate sides one for the menu and one for the rest, applying the position: sticky to the new side as it is the one who is supposed to cover its siblings while scrolling.

answered Nov 24 '22 at 17:47

Blye

619
4
20

The first paragraph helped me with a workaround. Thank you. – EvilDr Nov 24 '22 at 18:16
1

Quick fixed version for any future visitors although image is also sticky, but its a much better outcome than what I had - https://jsfiddle.net/EvilDr/usbcn60h/19/ – EvilDr Nov 24 '22 at 18:19
I'd appreciate an upvote if you find this answer satisfactory. – Blye Nov 24 '22 at 18:54

Sticky element inside flexbox (not in combination with)

1 Answers1