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

Question

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

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

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

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

这是sn-p：

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

你可以在不使用 JavaScript 的情况下用纯 Css 做到这一点：

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

Answer 2

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

z-index 定义了使用具有非静态位置的元素时的重叠优先级（静态是默认位置）。较高的 z-index 元素将覆盖较低的 z-index 元素。

默认情况下，您的页脚有position: static;，因为它没有定义，而静态元素默认有z-index: auto;，这与z-index: 0; 相同。通过声明您的固定元素有一个z-index: -1;，它的优先级将低于页脚，因此页脚将覆盖它。

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

您可以在MDN Web Docs: z-index 上阅读有关 z-index 的更多信息