javascript - AMP 中是否可以使用粘性 header ？

Question

到目前为止，我还没有找到在 AMP 页面上创建粘性 header 的可靠方法。我知道有 CSS 解决方法/技巧，但我无法在生产环境中使用。一个简单的“位置:固定；”不幸的是，我的情况不起作用。

在所有组件中，我认为会有一个可以在滚动时切换主体类，但我还没有找到任何东西。也不要认为“amp-position-observer”会有任何用处。

我错过了什么吗？理想情况下，我希望能够在滚动 X 像素后切换元素的类名。这在 AMP 中可行吗？

Answer 1

当前不支持在滚动 X 像素后切换元素的类名作为 amp-position-observer does not allow changing amp-state .

您可以结合 amp-position-observer 以使用 amp-animation 更改 header 的部分。然而，它的应用是有限的 supported CSS properties are limited .然而，只要有一点创造力，这种方法就可以非常灵活。一种可能的模式是复制标题中的元素，然后根据您的滚动位置显示/隐藏这些元素。

Here是一个基于当前焦点部分突出显示标题的示例。