CODEWITHSUNDEEP
jquerycss
user979331
user979331

Reputation: 11961

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

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?

Upvotes: 0

Views: 35

Answers (1)

Dorian
Dorian

Reputation: 61

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

Upvotes: 1

Related Questions