Question

到目前为止，我还没有找到在AMP页面上创建粘性标题的可靠方法。我知道有css解决方法/黑客攻击，但我无法在生产环境中使用任何东西。一个简单的“位置：固定;”不幸的是，在我的情况下不会起作用。

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

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

Answer 1

当前不支持X位像素卷的滚动时，切换元素的类名作为amp-position-observer does not allow changing amp-state。

您可以使用放大器动画组合放大器位置观察器来更改标题的各个部分。但是，它的应用程序仅限于supported CSS properties are limited。然而，通过一点创造力，这种方法可以非常灵活。一种可能的模式是复制标题中的元素，然后根据您的滚动位置显示/隐藏这些元素。

Here是一个示例，根据当前关注的部分突出显示标题。

Answer 2

我在放大器列表中构建了一个粘性标头的工作解决方案。缺点是放大器元素在许多元素上添加display: block和position: absolute。

要使用 position: sticky ，您需要在所有子元素上使用 display: inline 和 position: relative 你的标题。确保这些实际应用而不是覆盖，使用id来获得比放大器css类更高的specificity。

这是使用放大器列表的示例的CSS：

所有div都需要 display: inline
放大器列表获取 id （非类）以将css应用于自身和生成的子div
Divs只要使用display: inline

＆＃13;

.sticky {
  position: sticky;
  z-index: 1;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  background-color:white;
  top: 40px;
}

.inline {
  display: inline;
}

#list-wrapper, #list-wrapper>div {
  display: inline;
  position: relative;
}

＆＃13;

<div>
    <amp-list [src]="..." items="." single-item layout="flex-item" id="list-wrapper">
        <template type="amp-mustache">
            <div class="inline">
                <span class="sticky">
                    <span>Sticky header</span>
                </span>
            </div>
        </template>
    </amp-list>
    <div>Your content</div>
<div>

＆＃13;

Google AMP：Sticky标头可能吗？

2 个答案: