html - 在 div 底部时停止粘性滚动

Question

我有一个粘性侧边栏，当你向下滚动主要内容时，它的工作方式就像我想要的那样(它粘在我想要的地方)，但是当我到达页面底部时，由于某种原因侧边栏不粘并不断向上滚动，使侧边栏菜单中的前几项消失在我固定的标题后面。

我认为这是由于我为粘性元素定义的 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 formy sticky element, which I have set at 100vh.

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

解决方案

1. 设置div.content的高度与粘性元素相同
2. 去掉body的默认外边距

这样，您就不会滚动超过窗口中粘性元素的高度。因此，不会出现此问题。

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

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