css / jquery -在滚动到页脚之前将元素固定为绝对值

dtcbnfnu 于 2022-12-01 发布在 jQuery

关注(0)|答案(1)|浏览(205)

我有一个侧边栏，我有一个固定元素，但当它到达页脚，固定元素去了顶部我的页脚，我真正希望的是，如果固定元素停止滚动的权利之前，页脚：

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

下面是CSS：

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

使用jQuery或CSS，当这个固定元素到达页脚时，我如何将其转换为绝对元素，使其不超过页脚的顶部？

css

来源：https://stackoverflow.com/questions/74623488/css-jquery-fixed-element-to-absolute-before-scrolling-to-footer

1条答案

按热度按时间

s4n0splo1#

你可以不用任何javascript就可以做到。使用position：sticky和top value添加到相关播客类，如下所示：

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

赞(0）回复(0）举报 2022-12-01

我来回答

css / jquery -在滚动到页脚之前将元素固定为绝对值

1条答案

相关问题

热门标签

最新问答