AMP 中是否可以使用粘性标头？答案

【问题标题】：Is a sticky header possible in AMP?AMP 中是否可以使用粘性标头？
【发布时间】：2018-11-22 11:01:35
【问题描述】：

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

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

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

【问题讨论】：

为什么position: fixed 不起作用？有一个官方的例子：github.com/ampproject/amphtml/blob/master/examples/…
你试过 position:sticky 吗？（这是一个很好的博客gedd.ski/post/position-sticky）
@ceejayoz 由于标题的性质，我无法在滚动时保持相同的布局。有一些子项目需要消失，背景颜色需要改变等。可能不得不走那条路并处理设计牺牲。没什么大不了的。
@RachelGallen 我认为这将是与上述相同的问题。如果有某种伪选择器，我可以做到。 .header:sticky {background-color:red} 不幸的是，没有骰子。
@JosephWer 你寻找css属性有什么原因吗？您可以轻松地在 js 函数中使用 scrollTop 位置在一定数量的像素后更新类名..

标签： javascript css amp-html

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我在 amp-list 中构建了一个粘性标题的工作解决方案。陷阱是 amp 元素在许多元素上添加了display: block 和position: absolute。

要使用 position: sticky，您需要在标题的所有子元素上使用 display: inline 和 position: relative。确保这些实际应用且未被覆盖，使用 id 获得比 amp css 类更高的specificity。

这是一个使用放大器列表的示例 css：

所有 div 都需要 display: inline
amp-list 获得一个 id（不是类）以将 css 应用于自身和生成的子 div
Divs 可以嵌套，只要它们使用display: inline

.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;
}

<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>

【讨论】：