Липкий элемент внутри переполнения - PullRequest
Новая
       29

Липкий элемент внутри переполнения

0 голосов
/ 04 ноября 2018

Я бы хотел сделать заголовок шкалы времени прикрепленным к верхней части страницы в следующем примере: http://jsfiddle.net/m152usbd/1/

Но поскольку на временной шкале включено переполнение, закрепление перестает работать с заголовком временной шкалы. 

.timeline{
  overflow: auto;
}

.timeline-header{
  position: sticky;
  top: 0;
}

Самое близкое, к чему я пришел, это: http://jsfiddle.net/ztuf4gjc/1/

Но я чувствую, что это не очень хорошее решение, потому что мне нужно настроить все остальные элементы на странице, чтобы сделать эту работу, и я могу предвидеть некоторые побочные эффекты. Кроме того, я хочу, чтобы по оси X прокручивалась только часть временной шкалы, а не вся страница.

Кто-нибудь знает, как решить эту проблему?

Обновление

Судя по ответам @ a - m, это может быть невозможно с CSS, к сожалению. Вот подход js: http://jsfiddle.net/cvk43g1o/

Если кто-нибудь знает, как это сделать с помощью CSS, пожалуйста, дайте мне знать!

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Я думаю, что невозможно достичь того, что вы просите, используя только CSS:

Позиционируемое поле позиционируется аналогично относительно позиционированному блоку, но смещение вычисляется со ссылкой на ближайшего предка с ползунком прокрутки или в окне просмотра, если ни у какого предка нет прокручиваемого блока.

https://www.w3.org/TR/css-position-3/#sticky-pos

Поскольку родительский элемент timeline имеет горизонтальную прокрутку, то липкая ссылается на эту и теряет возможность отслеживать окно по вашему желанию. В этом случае ограничение sticky не позволяет отслеживать два разных контейнера.

0 голосов
/ 04 ноября 2018

Мне кажется, что вы могли бы просто скопировать содержимое .timeline-header в .timeline, и, кажется, это работает, насколько я понимаю вопрос.

Причина, по которой position: sticky не будет работать при применении к .timeline-header, заключается в том, что прокрутка зависит от содержащего ее блока, и, поскольку она занимает большую часть содержащего его блока, вы фактически не увидите его перемещение до возвращения в положение относительное. Когда position: sticky применяется к .timeline, содержащий блок становится намного больше, что позволяет видеть его прокрутку по всей странице.

...