Ускоренные мобильные страницы (AMP) Как сделать фиксированный заголовок? - PullRequest
Новая
       7

Ускоренные мобильные страницы (AMP) Как сделать фиксированный заголовок?

0 голосов
/ 27 сентября 2018

Вопрос относится только к AMP.Я считаю эту цитату простым вопросом.Если бы он попытался зафиксировать положение элемента, он показывает предупреждение в консоли js, а заголовок переместился на несколько пикселей туда, где и должен быть.Я посмотрел на примеры, но там слишком много кода / стилей, поэтому я не понял, как они выполняют эту задачу.

Мне нужно сделать элемент зафиксированным сверху при прокрутке страницы, этот элемент содержит две кнопки- меню, общий ресурс и заголовок сайта, хорошо, если кнопки могут перемещаться влево / вправо.

У меня не было проблем с аналогами на обычных страницах, как мобильных, так и настольных, но я новичок в AMP.

1 Ответ

0 голосов
/ 11 октября 2018

Я нашел там решение: 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>

@ Райан предоставил свой собственный метод в комментариях, но мне было трудно проверить сайт на наличие необходимого кода, а затем просто небольшой простой пример.

...