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

Posted 2023-05-08

【中文标题】在页脚上重叠的滚动固定侧边栏

【英文标题】：On-scroll fixed sidebar overlapping on footer

【发布时间】：2021-06-19 08:56:13

【问题描述】：

我正在使用 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>

【参考方案1】：

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

`
.container
  position:relative;

#aside-content
  position: sticky;
  top: 0;
  align-self: flex-start;

`

【讨论】：

哇，这真是令人难以置信的整洁，做了 3 年的前端（软件是主要的），从来不知道position: sticky;。我想知道是否需要设置其他值才能使粘性起作用？我阅读了文档，您使用的是 top、relative 和 align self，为什么在这种情况下需要它们？

实际上，你可以删除相对于容器的位置，它仍然会以同样的方式工作:)

@Ossama90 的绝妙答案。不需要JS。非常感谢朋友。

【参考方案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 的更多信息

【讨论】：

嘿伙计。谢谢你的时间。问题是侧边栏滚动到其主容器之外。我需要它停在容器的底部，而不是超出并重叠页脚。

@Zak 我一定误解了这个问题。让我改写一下，以确保这次我明白了：您希望 side-fixed 元素在碰到页脚时停止一起滚动，这样当滚动到底部时页脚和 side-fixed 元素都将完全可见？

是的。请以扩展方式查看 sn-p。侧边栏应在其兄弟旁边停止。那是左边的main content 部分。