可以在网站顶部修复多个标题文字吗？

Question

我相信我以前见过这件事，但我不记得在哪里。我想要的是将文本固定到屏幕的顶部（就像你可以使用导航栏，但我希望它只是网站的一部分而不是导航栏的标题文本），然后当你向下滚动到下一部分，新的标题文本将其颠簸，并保持锁定直到下一部分。

看着我上传的设计，我很喜欢＆＃34; motalife.photography＆＃34;在滚动摄影部分时处于顶部，然后被撞到路上并且有＆＃34; motalife.design＆＃34;在滚动该部分时固定在顶部。有可能吗？

Answer 1

您可能希望阅读＆＃34; position：sticky＆＃34;： https://developer.mozilla.org/en/docs/Web/CSS/position

  

粘性定位的常见用法是按字母顺序排列的列表中的标题。 B标题将出现在以A开头的项目下方，直到它们在屏幕外滚动。然后B标题将保持固定在视口的顶部，直到所有B项都在屏幕外滚动，此时它将被C标题覆盖，依此类推，而不是使用其余内容滑动屏幕。

从我所读过的内容来看，它已被暂停了一段时间，但最近已经复活了。因此它可能无法在所有情况下起作用，并且您需要了解各种相关问题。我刚刚在我当前项目中的div上测试过它（包括-webkit-sticky和-moz-sticky for good measure），它似乎按照描述的方式工作（在Mint的FF和Chromium中）。