css 如何让它这样的页脚仍然在页面底部滚动到视图后？

lb3vh1jj 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(123)

假设我有一个隐藏在视口折叠下方的页脚，因为有很多内容。我想让它显示当我到达内容的结尾，但停留在屏幕的底部固定。我想的内容是滚动所有的方式到内容的底部到屏幕的顶部（减去页脚），像这样（像VSCode文件滚动的工作原理）：

我怎样才能使它像上面的GIF一样工作，但页脚显示并粘在屏幕底部，而内容一直滚动到顶部？页脚不应该显示，直到它可以看到，下面的所有内容。

#content {
  padding-bottom: 90vh;
}

<div id="container">
<div id="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>LAST CONTENT</p>
</div>
<footer>I'm the footer</footer>
</div>

该代码片段显示了将内容滚动到顶部后的页脚。我不想这样，我希望页脚显示后的页面底部的权利，但停留在底部，因为你“完成”向上滚动的内容。不知道这需要有多复杂，或者是否可以在纯CSS/HTML（没有JS）中完成。我都不介意。

css

来源：https://stackoverflow.com/questions/77270034/how-to-have-it-so-footer-remains-at-bottom-of-page-after-scrolling-into-view

1条答案

按热度按时间

niwlg2el1#

你在找一个粘乎乎的页脚吗？但是一个只有在你一路向下滚动之后才出现的东西？intersection observer可能会有帮助。

const observer1 = new IntersectionObserver(entries => {
  const footer = document.querySelector('footer')
  entries.forEach((entry) => {
    if (entry.isIntersecting)
      footer.classList.add('visible')
    else
      footer.classList.remove('visible')
  })
})

observer1.observe(document.getElementById('spacer'))

body {
  margin: 0;
}

#spacer {
  margin-top: 10vh;
  height: 80vh;
  display: flex;
  align-items: center;
  color: #bbb;
  background: #eee;
  padding-left: 1em;
}

footer {
  background: black;
  color: white;
  bottom: 0;
  padding: 0.5em 1em;
  position: sticky;
  opacity: 0;
  transition: 0.3s;
}

footer.visible {
  opacity: 1;
}

<div id="container">
  <div id="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>I’m the last paragraph of content.</p>
  </div>
  <div id="spacer">I’m the spacer. The intersection observer watches me move in and out of the viewport and displays or hides the footer accordingly.</div>
  <footer>
    I’m the footer.
  </footer>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何让它这样的页脚仍然在页面底部滚动到视图后？

1条答案

相关问题

热门标签

最新问答