Google AMP: возможен липкий заголовок? - PullRequest
Новая
       24

Google AMP: возможен липкий заголовок?

0 голосов
/ 13 июня 2018

До сих пор я не нашел надежного способа создать липкий заголовок на страницах AMP.Я знаю, что есть обходные пути / хаки, но я ничего не могу использовать в производственной среде.Простая «позиция: исправлена»;к сожалению, не будет работать в моем случае.

Из всех компонентов я думал, что будет один, который переключает класс тела при прокрутке, но я еще ничего не нашел.Также не думайте, что «amp-position-наблюдатель» будет полезен.

Я что-то упустил?В идеале я хотел бы иметь возможность переключать имя класса элемента после прокрутки X количество пикселей.Если это возможно в AMP?

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Я построил рабочее решение с липким заголовком в списке усилителей.Подводный камень в том, что элементы усилителя добавляют display: block и position: absolute ко многим элементам.

Для использования position: sticky вам необходимо использовать display: inline и position: relative на всех подэлементах в вашем заголовке.Убедитесь, что они действительно применены и не перезаписаны, используйте id, чтобы получить более высокую специфичность по сравнению с классами amp css.

Вот пример использования списка усилителей css:

  • Всем div нужно display: inline
  • В списке усилителей id (не класс) для применения css к себе и сгенерированному дочернему div
  • Div можно вкладывать, пока они используют 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>
0 голосов
/ 13 июня 2018

Переключение имени класса элемента после прокрутки количества пикселей X в настоящее время не поддерживается, поскольку наблюдатель положения усилителя не позволяет изменять состояние усилителя .

Вы можете комбинировать amp-position-обозреватель для изменения частей заголовка с помощью amp-animation.Однако его применение ограничено, так как поддерживаемые свойства CSS ограничены .Тем не менее, при небольшом творческом подходе этот подход может быть достаточно гибким.Одним из возможных шаблонов является дублирование элементов в заголовке, которые затем отображаются / скрываются в зависимости от положения прокрутки.

Здесь - это образец, выделяющий заголовок на основе выделенного в данный момент раздела.

...