AMP 中是否可以使用粘性标题?

人气:477 发布:2022-10-16 标签: javascript css amp-html

问题描述

到目前为止,我还没有找到在 AMP 页面上创建粘性标题的可靠方法.我知道有 CSS 解决方法/技巧,但我不能在生产环境中使用任何东西.一个简单的位置:固定;"不幸的是,在我的情况下不起作用.

So far I haven't found a solid way to create a sticky header on AMP pages. I know there are CSS workaround/hacks, but nothing I can use in a production environment. A simple "position:fixed;" unfortunately won't work in my case.

在所有组件中,我以为会有一个可以在滚动时切换 body 类,但我还没有找到任何东西.也不要认为amp-position-observer"会有任何用处.

Out of all the components, I thought there would be one that toggles a body class on scroll, but I haven't found anything yet. Also don't think "amp-position-observer" will be of any use.

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

Am I missing something? Ideally I'd like to be able to toggle an element's class name after a scroll of X amount of pixels. Is this possible in AMP?

推荐答案

当前不支持在滚动 X 个像素后切换元素的类名作为 amp-position-observer 不允许更改放大器状态.

Toggling an element's classname after a scroll of X amount of pixels is currently not supported as amp-position-observer does not allow changing amp-state.

您可以结合 amp-position-observer 来使用 amp-animation 更改标题的部分内容.但是,它的应用受到限制,因为 支持的 CSS 属性有限.尽管如此,只要有一点创造力,这种方法就可以非常灵活.一种可能的模式是复制标题中的元素,然后根据滚动位置显示/隐藏这些元素.

You can combine amp-position-observer to change parts of the header using amp-animation. However, it's application is limited as the supported CSS properties are limited. Nevertheless, with a little bit of creativity this approach can be quite flexible. One possible pattern is to duplicate elements in your header which are then shown/hidden based on your scrolling position.

这里是一个示例,根据当前关注的部分突出显示了标题.

Here is a sample highlighting the header based on the currently focused section.

887