Unstick position sticky element when it reaches a position absolute sibling within a container

user_111445 0
Viewed 264

I have a container which has a sticky element that sticks to the top, within the container, there's also a position absolute element at the bottom. I only want the sticky element to be sticky up to the point when it reaches the bottom element.

My solution requires knowing the bottom element height in order to reserve a min-height for the sticky element to be sticky.

Is there a way to do it without know the height of the bottom position absolute element?

.container {
  height: 1000px;
}

aside {
  background: palegoldenrod;
  height: 600px;
  width: 300px;
  position: relative;
}

.stickyWrapper {
  min-height: calc(100% - 100px);
}

.sticky {
  position: sticky;
  top: 0;
}

.stickyItem {
  background: pink;
  height: 100px;
  color: #000;
}

.bottomThing {
  position: absolute;
  bottom: 0;
  height: 100px;
  background: blue;
  color: #fff;
  width: 100%;
}
<div class="container">
  <aside>
    <div class="stickyWrapper">
      <div class="sticky">
        <div class="stickyItem">
          sticky item
        </div>
      </div>
    </div>
    <div class="bottomThing">
      position absolute
    </div>
  </aside>
</div>

css-position sticky absolute layout css
1 Answers

I've worked out a solution by using flexbox. I will also no longer need the bottom element to be position absolute.

.container {
  height: 1000px;
}

aside {
  background: palegoldenrod;
  height: 600px;
  width: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.stickyWrapper {
  flex-grow: 1;
}

.sticky {
  position: sticky;
  top: 0;
}

.stickyItem {
  background: pink;
  height: 100px;
  color: #000;
}

.bottomThing {
  height: 100px;
  background: blue;
  color: #fff;
  width: 100%;
}
<div class="container">
  <aside>
    <div class="stickyWrapper">
      <div class="sticky">
        <div class="stickyItem">
          sticky item
        </div>
      </div>
    </div>
    <div class="bottomThing">
      position absolute
    </div>
  </aside>
</div>

user_1114450
Related