Question

问题仅属于AMP。我相信这个报价简单的问题。如果尝试将元素的位置固定，则它会在js控制台中显示警告，并且标头将其移至应有的几个像素处。我看过示例，但是代码/样式太多，所以不了解它们是如何完成任务的。

滚动页面时，我需要将元素固定在顶部，该元素包含两个按钮-菜单和共享以及网站标题，如果按钮可以左右浮动，则很好。

在移动或台式机上的普通页面上，我都没有问题，但是我是AMP的新手。

Answer 1

我在那里找到了解决方案：https://amp-demos.glitch.me/sticky-header.html 它与我所需要的不同，它根据文章的一部分选择菜单项，当前使用动画和观察者插件进行阅读。但是我发现很容易修改。在我的示例菜单中，菜单按其应有的方式移动，并具有子菜单项。删除了动画，将其轻松押注，只需比较两个版本即可。

CSS：

:root {
  --header-height: 3em;
}
.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
}
.sticky-header .item {
  position: relative;
}
.sticky-header .item > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: var(--header-height);
}

.sticky-header .item .selected {
  opacity: 0;
}

/* move anchor sections below the sticky header */
:target {
  display: block;
  position: relative;
  top: calc(-1 * var(--header-height) - 8px);
  visibility: hidden;
}

/* general styling */
h1 {
  text-align: center;
}
h1, main {
  margin: 1rem;
}
a, a:visited {
  color: inherit;
  text-decoration: inherit;
  background-color: inherit;
}
.sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: inherit;
}
.sticky-header .item {
  height: 100%;
  width: 100%;
}
.sticky-header .item > * {
  text-align: center;
  color: inherit;
}
.sticky-header .item .selected {
  color: red;
}
.submenu {
  display:none;
}
.item:hover .submenu {
  display:  block;
  position: relative;
  top: var(--header-height);
  line-height: 2em; //calc(1em + 12px);
  background: black;
}
.item:hover .submenu a {
  display: block;
}

HTML部分，简化：

<div class="sticky-header">
  <div class="item" tabindex="0" role="button">
    <a href="#item1">Item 1</a>
    <div class="submenu">
      <div tabindex="0" role="button"><a href="#s1">Sub menu</a></div>
      <div><a href="#s2">Sub menu</a></div>
      <div><a href="#s3">Sub menu</a></div>
    </div>
  </div>
  <div class="item" tabindex="0" role="button">
    <a href="#item2">Item 2</a>
  </div>
  <div class="item" tabindex="0" role="button">
    <a href="#item3">Item 3</a>
  </div>

@Ryan在注释中提供了他自己的方法，但是我发现很难检查站点中所需的代码，而只是一个简单的示例。

加速移动页面（AMP）如何制作固定标题？

1 个答案: