html - 可以修复网站顶部的多个标题文本吗？

Question

我相信我以前见过这个，但我不记得在哪里。我想要的是将文本固定到屏幕顶部(就像您可以使用导航栏一样，但我希望它只是网站一部分而不是导航栏的标题文本)，然后当您向下滚动到下一节，新的标题文本会将其移开并保持锁定状态，直到下一节。

查看我上传的设计，我希望“motalife.photography”在滚动浏览摄影部分时位于顶部，然后让“motalife.design”出现在顶部滚动浏览该部分时固定在顶部。可能吗？

Answer 1

您可能想阅读“position: sticky”: https://developer.mozilla.org/en/docs/Web/CSS/position

A common use for sticky positioning is for the headings in an alphabetized list. The B heading will appear just below the items that begin with A until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading, and so on.

根据我的阅读，它被删除了一段时间，但最近又恢复了。因此，它可能并非在所有情况下都有效，并且您需要了解各种相关问题。我刚刚在我当前元素的一个 div 上测试了它(包括 -webkit-sticky 和 ​​-moz-sticky 以达到很好的效果)，它似乎按照描述的方式工作(在 FF 和 Chromium on Mint 中)。