css / jquery – fixed element to absolute before scrolling to footer

css / jquery – fixed element to absolute before scrolling to footer

Problem Description:

I have a sidebar that I have as a fixed element, but when it gets to the footer, the fixed element goes over top my footer, what I would really like is if the fixed element stopped scrolling right before the footer:

<div class="container">
    <div class="row">
        <div class="col-md-8">Blah Blah Blah</div>
        <div class="col-md-4 related-podcasts">
            <ul class="podcast-list">
                <li><i class="fa-solid fa-podcast"></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i class="fa-solid fa-podcast"></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i class="fa-solid fa-podcast"></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i class="fa-solid fa-podcast"></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i class="fa-solid fa-podcast"></i> Lorem ipsum dolor sit amet - In aliquet</li>
            </ul>
        </div>
    </div>
</div>
<footer style="height:200px; color: black;"></footer>

And Here is the CSS:

.related-podcasts {
    position: fixed;
    width: 33.33333333%;
    right: 0px;
    z-index: 1;
}

Using jQuery or CSS, how can I turn this fixed element to an absolute element when it reaches the footer so its not going over top of the footer?

Solution – 1

You can do it without any javascript. Use position: sticky and a top value to your related-podcasts class like so:

.related-podcasts {
    position: sticky;
    width: 33.33333333%;
    top: 0px;
    right: 0px;
    z-index: 1;
}