How do I make part of an element stick so that it resizes with page scroll?

I have a very odd use case I'm trying to implement. I want to make an HTML element that will shrink as you scroll down (top edge will behave like position: sticky, and bottom will behave like position: absolute). I'm planning on using this element as a background for a header where I'll have some SVGs to form a landscape that as you scroll down the elements that are further in the background will be obscured by the closer elements (achieved by setting their positions based on percentage values). I can't see any way in CSS to set different positioning methods for different edges of an element.

Any advice on how to achieve this dynamic resizing effect? I'd prefer to use pure HTML and CSS if possible, but if JS is necessary to solve my problem then that's perfectly fine.

Here's my code so far:

HTML:

<header>
  <nav> ... </nav>
  <div id="hero">
    <div class="bg">
      <div class="item_1"></div>
      <div class="item_2"></div>
      <div class="item_3"></div>
    </div>
    <div id="hero-content">
      ...
    </div>
  </div>
</header>

Here, <div class="bg"> is the element I want to apply this behavior to.

Current CSS:

header {
  
}

#hero {
  position: relative;
  height: 90vh;
}

#hero .bg {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -999;
}

#hero .bg .item-1 {
  width: 100%;
  height: 80%;
  position: absolute;
  bottom: 0;
}

#hero .bg .item-2 {
  width: 100%;
  height: 350px;
  position: absolute;
  bottom: 0;
}

#hero .bg .item-3 {
  width: 150px;
  height: 200px;
  position: absolute;
  bottom: 220px;
  right: 5%;
}

#hero-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 1rem;
  width: 70%;
}