在页脚上重叠的滚动固定侧边栏

Question

我正在为我的布局使用 Bootstrap，并且我一直试图在视口到达它之后使我的侧边栏固定在滚动上。 现在滚动部分工作正常，但问题出现在底部。

到达底部后，侧边栏移动到页脚上方并与其重叠。 我已经尝试了至少 4 种 SO 解决方案，但似乎没有任何效果。

所以简而言之，我一直试图实现的是将侧边栏停止在其主要父容器的末尾，而不是与页脚部分重叠。

这是检查问题的代码笔： https://codepen.io/zakero/pen/yLgBGqq

这是片段：

 // FIXED SCROLL const main = $("#main"); const aside = $('#aside-content'); const asideInner = $('#aside-content.aside-content'); const sticky = main.offset().top; $(window).scroll(() => { if ($(window).scrollTop() >= sticky) { $(aside).addClass("aside-fixed") } else { $(aside).removeClass("aside-fixed"); } }); // PREVENT OVERLAP ISSUE // const topOfFooter = $('.footer-bs').position().top; // const scrollDistanceFromTopOfWin = $(window).scrollTop() + // $(tableOfContentsInner).height(); // const scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfWin - topOfFooter; // if (scrollDistanceFromTopOfWin > topOfFooter) { // $(tableOfContents).css('margin-top', 0 - scrollDistanceFromTopOfFooter - 48); // } else { // $(tableOfContents).css('margin-top', 0); // }

 .header-content { background-color: blue; height: 800px; margin: 20px 0; }.main-content { background-color: cyan; height: 2000px; margin: 20px 0; }.aside-content { background-color: red; height: 400px; margin: 20px 0; }.aside-fixed { position: fixed; top: 0; right: 0; } footer { background-color: brown; height: 400px; }

 <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Test</a> </nav> <section class="container"> <div class="row"> <div class="col-md-12"> <div class="header-content"> <h3>header content</h3> </div> </div> </div> </section> <section class="container" id="main"> <div class="row"> <div class="col-sm-12 col-md-8"> <div class="main-content"> <h3>main content</h3> </div> </div> <div class="col-sm-12 col-md-4" id="aside-content"> <div class="aside-content"> <h3>aside content</h3> </div> </div> </div> </section> <footer> <h3>footer</h3> </footer>

Answer 1

你可以用纯 Css 做到这一点，而无需使用 JavaScript：

`
.container{
  position:relative;
}
#aside-content{
  position: sticky;
  top: 0;
  align-self: flex-start;
}
`

Answer 2

添加z-index: -1; 到.aside-fixed class。

z-index 在使用位置不是 static（静态是默认位置）的元素时根据重叠定义优先级。 较高的 z-index 元素将覆盖较低的 z-index 元素。

您的页脚有position: static; 默认情况下，因为它没有定义，并且 static 元素默认具有z-index: auto; 与z-index: 0; . 通过说明您的固定元素具有z-index: -1; 它的优先级低于页脚，因此页脚将覆盖它。

在处理多个非静态元素时，最简洁的方法是为两个（或所有相关）元素提供一个 z-index，其中一个元素高于另一个元素。 这样，所有相关元素都有一个 z-index 声明，这使得编写代码更容易，因为没有“神奇的”未声明的默认 z-index 值会干扰。 您也可以通过这种方式避免使用负 z-index。

您可以在MDN Web 文档中阅读有关 z-index 的更多信息：z-index