AMP中是否可能有粘性接头? [英] Is a sticky header possible in AMP?

问题描述

到目前为止，我还没有找到在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.

在所有组件中，我以为会有一个可以在滚动上切换主体类的组件，但是我还没有发现任何东西.也不要认为"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?

推荐答案

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.

这篇关于AMP中是否可能有粘性接头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！