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

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

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

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


javascript css amp-html
person Joseph Wer    schedule 13.06.2018    source источник
comment
Почему position: fixed не работает? Вот официальный пример: github. com/ampproject/amphtml/blob/master/examples/   -  person ceejayoz    schedule 13.06.2018
comment
вы пробовали position:sticky? (вот хороший блог об этом gedd.ski/post/position-sticky)   -  person Rachel Gallen    schedule 13.06.2018
comment
@ceejayoz из-за характера заголовка я не могу сохранить один и тот же макет при прокрутке. Есть некоторые подэлементы, которые должны исчезнуть, цвет фона должен измениться и т. д. Возможно, придется пойти по этому пути и пожертвовать дизайном. Ничего страшного.   -  person Joseph Wer    schedule 13.06.2018
comment
@RachelGallen Я думаю, что это будет та же проблема, что и выше. Если бы был какой-то псевдоселектор, я бы это сделал. .header:sticky {background-color:red} К сожалению, кубиков нет.   -  person Joseph Wer    schedule 13.06.2018
comment
@JosephWer есть ли причина, по которой вы ищете атрибуты CSS? Вы можете легко использовать позицию scrollTop в функции js для обновления имени класса после определенного количества пикселей.   -  person Rachel Gallen    schedule 13.06.2018
comment
@RachelGallen это проект Google AMP, поэтому, к сожалению, собственный javascript не разрешен :(   -  person Joseph Wer    schedule 13.06.2018

Ответы (2)


arrow_upward
6
arrow_downward

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

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

Вот приведен пример выделения заголовка на основе текущего раздела.

person Sebastian Benz    schedule 13.06.2018

arrow_upward
1
arrow_downward

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

Чтобы использовать position: sticky, вам нужно использовать display: inline и position: relative во всех подэлементах вашего заголовка. Убедитесь, что они действительно применяются и не перезаписываются, используйте идентификатор, чтобы получить более высокий специфичность над классами 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>

person lisa p.    schedule 13.06.2018