Липкий элемент внутри элемента переполнения
Я хотел бы, чтобы заголовок временной шкалы был прикреплен к верхней части страницы в следующем примере: 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
Мне кажется, что вы можете просто скопировать содержимое .timeline-header в .timeline, и, насколько я понимаю, это работает.
Причина, по которой position: sticky не будет работать при применении к .timeline-header, заключается в том, что прокрутка зависит от содержащего блок, и поскольку он занимает большую часть содержащего его блока, вы фактически не видите, как он перемещается, прежде чем он вернется в относительное положение. Когда position: sticky применяется к .timeline, содержащий блок намного больше, что позволяет видеть его прокручивающимся по странице.
Я думаю, что невозможно добиться того, о чем вы просите, только с помощью CSS:
A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.
https://www.w3.org/TR/css-position-3/#sticky-pos
Так как родительский timeline имеет горизонтальную прокрутку, липкий элемент относится к этому и теряет возможность отслеживать окно по вашему желанию. Ограничение sticky в этом случае состоит в том, что он не может отслеживать два разных контейнера.
Спасибо за разъяснения. Я подозревал, что что-то подобное происходит, но хорошо знать, почему именно. Вы знаете, что было бы лучшим альтернативным решением? Я предполагаю, что с помощью события прокрутки js?
@kingofbbq Я не могу придумать лучшей альтернативы, хотя мне не нравится идея, что это будет выполняться каждый раз, когда окно прокручивается ... при публикации этого ответа я сделал несколько попыток проб и ошибок, и ни один из них мне не понравился достаточно, чтобы перейти к «альтернативному примеру ответа». Если посмотреть на stickyfill Источник полифилла, похоже, что он делает что-то похожее.
То же самое здесь ... очень плохо, хотя спасибо за расследование!
Np @kingofbbq, рад, что смог помочь уточнить. Не забывайте принимать ответы и голосовать за, когда считаете, что это того стоит. Это лучший способ сказать спасибо на SO. Кроме того, напоминание, взгляните на тур, если еще не сделали.
Спасибо за напоминание. Похоже, у меня пока недостаточно репутации, чтобы проголосовать за. Подойдет, как только это станет доступно для меня!
Не беспокойтесь, льготы придут со временем. Вы отлично справились со своими первыми вопросами.
Спасибо за Ваш ответ. При создании .timeline
position: stickyвесь элемент временной шкалы станет «липким». Я просто хочу, чтобы заголовок временной шкалы оставался вверху при прокрутке вверх. Или вы что-то другое имеете в виду?