How can I change the style of a sticky element when the sticky element is stuck to the bottom of its parent?

Question

I need the sticky element to have opacity: 0 when it gets to the bottom of its parent. How can I trigger an event when it hits the bottom of its parent? Or is there another way to do this?

Codepen here to view working example. When the first / right close content gets to the bottom i'd like to add a class or something to hide it.

Note have left out the accordion js as it's not relevant to this question :)

<div class="content">
   <h2>This is some content, click to reveal</h2>
   <div class="content__sticky-toggle">Close content</div>
   <div class="content__container">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus lacus, tempus vitae nunc in, tristique viverra quam. Curabitur non ullamcorper nisi. Nunc aliquet nibh erat, nec aliquam nibh ornare sit amet. Praesent vel dignissim ipsum. Mauris consectetur lacus diam, in sodales neque posuere ut. Proin ac tellus leo. Vestibulum sollicitudin tellus ac ante posuere, vitae egestas velit condimentum. Cras eu lorem vel sapien iaculis auctor.
       </p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
       <p>
           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>

           Duis finibus erat nulla, et rutrum neque sollicitudin quis. Sed sem arcu, pretium ut aliquam ac, consequat sed nunc. Vivamus at porta augue. Ut eros sem, varius eget posuere sit amet, placerat quis urna. Suspendisse vel urna aliquet, pharetra enim a, pretium risus. Nulla a libero ligula. Etiam venenatis interdum enim sit amet semper. Aenean vestibulum mi id ultrices pharetra. Mauris id vehicula diam, id commodo sem. Etiam viverra suscipit posuere. Morbi sit amet ipsum luctus, sollicitudin justo quis, dapibus erat. Vivamus auctor, urna eget ultrices consequat, felis magna rutrum tellus, eget pulvinar sapien leo ac tortor. Suspendisse faucibus sed ipsum in molestie. In viverra laoreet euismod. Fusce lacinia orci a lobortis scelerisque. Phasellus pellentesque convallis massa, vel ullamcorper est ullamcorper non.</p>
           <div class="content__toggle">Close content</div>
   </div>
</div>

CSS

.content {
    max-width: 960px;
    margin: auto;
}

.content__container {
    max-width: 960px;
    margin: auto;
}

.content__toggle {
    font-size: 20px;
}

.content__sticky-toggle {
    position: sticky;
    position: -webkit-sticky;
    font-size: 20px;
    top: calc(100vh - 20px);
    margin-left: calc(100% - 130px);
    background: white;
}

Answer 1

Used intersection observer on the not sticky item. https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe When the not sticky item intersects - add a class to their shared parent.