css / jquery - fixed element to absolute before scrolling to footer-CodePudding

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 >
    <div >
        <div >Blah Blah Blah</div>
        <div >
            <ul >
                <li><i ></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i ></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i ></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i ></i> Lorem ipsum dolor sit amet - In aliquet</li>
                <li><i ></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?

CodePudding user response：

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;
}