在 div 底部时停止粘性滚动

Question

我有一个粘性侧边栏，当你向下滚动主要内容时，它的工作方式就像我想要的那样（它粘在我想要的地方），但是当我到达页面底部时，出于某种原因侧边栏不固定并继续向上滚动，使侧边栏菜单中的前几项在我身后消失已修复header。

我认为这是由于我为粘性元素定义的 css 高度属性，我将其设置为 100vh。

如何设置我的粘性侧边栏，以便当我到达页面底部时，它不会继续向上滚动？

这是我为这一部分编写的代码，如果它更简单，这里是 URL 网站的工作版本。

这是我的 HTML 和 CSS

  /* sidebar styling */

aside {
  height: 100vh;
  width: 160px;
  margin-left: -0.5em;
  position: sticky;
  z-index: 0.5;
  top: 4em;
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
}

aside a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.25em;
  color: black;
  display: block;
}

aside a:hover:not(.current-menu-item) {
  background-color: tan;
  font-weight: bold;
}

.current-menu-item {
  background-color: white;
  font-weight: bold;
}


/* main content styling */

.content {
  margin-left: 160px;
  font-size: 28px;
  padding: 0em 0.5em;
}

a.anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;

<section>

  <aside>
    <a class="menu-item-1" href="#target1">About</a>
    <a class="menu-item-2" href="#target2">Services</a>
    <a class="menu-item-3" href="#target3">Clients</a>
    <a class="menu-item-4" href="#target4">Contact</a>
  </aside>

  <div class="content">

    <a class="anchor" id="target1"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target2"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target3"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target4"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

  </div>

</section>

Answer 1

I think this is due to the css height property that I have defined for my sticky element, which I have set at 100vh.

你是对的。一旦滚动超过粘性元素的高度，它就不会再粘在屏幕上了。这是因为position sticky still sets an element in the normal flow.

解决方案

设置div.content的高度与粘性元素相同
去除body

这样，您就不会滚动超过 window 中粘性元素的高度。所以不会出现这个问题。

现在，div.content 的最后一个元素因额外填充而溢出。因此，设置 overflow: hidden 以保持其高度与粘性元素相同。
body 有一个默认边距。所以，设置 margin: 0 为它。

它会把大部分的东西都固定在正确的位置上，但是仍然定义了一些不必要的样式。因此，您可以根据需要修复其余部分。祝你好运，我希望我回答了你的问题。

在 div 底部时停止粘性滚动

Stop sticky scroll when at the bottom of div

html

css

sticky