制作符合 amp-html 的固定标头答案

【问题标题】：Make fixed header that is amp-html compliant制作符合 amp-html 的固定标头
【发布时间】：2020-03-03 06:01:21
【问题描述】：

amp-validator 不允许在样式表中使用 position: fixed。

是否有另一种方法可以制作附加到顶部且不以 amp-conform 方式滚动的标题？

编辑：

完整示例：

<div style="background:red;position:fixed;right:-50px;padding-left:50px;padding-right:50px;transform:translateY(100%) rotate(45deg)">
    <h5>Text</h5>
</div>

这是我收到的错误消息：

[ warn ]  Amp Validation

/  error  CSS syntax error in tag 'div' - the property 'position' is set to the disallowed value 'fixed'.  https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages

【问题讨论】：

位置：粘性？
@G-Cyrillus 也被封了
好的 :( ，你看到那个了吗？stackoverflow.com/questions/50827468/… 在这里演示 amp-demos.glitch.me/sticky-header.html 在 validator.ampproject.org/… 验证
这很奇怪。我在本地尝试了粘性/固定和验证失败。另外，检查github.com/ampproject/amphtml/blob/master/validator/… line 3106 "# CSS property position with values fixed and `sticky are not allowed."
是的，如果我从内联样式中提取“位置：固定”到全局样式表中，它会起作用...

标签： css amp-html

【解决方案1】：

感谢https://stackoverflow.com/users/2442099/g-cyrillus指出解决方案：

如果position: fixed 用作内联样式，则验证失败。

使用

.fixed {
  position: fixed;
}

和

<div class="fixed" style="background:red;right:-50px;padding-left:50px;padding-right:50px;transform:translateY(100%) rotate(45deg)">

可以说服 amp-validator。

【讨论】：