Я взял ответ jnns и обновил его так, чтобы он был гладким между свитками, как это могло бы быть с липким набором. Единственная проблема заключается в том, что для содержащего div s.t требуется магическое число. контейнер сохраняет свой размер, а div абсолютно позиционирован - это может быть решено в вашем коде с помощью переменной css.
элемент сposition: sticky "Застрял" и длиннее, чем область просмотра, вы можете увидеть его содержимое только после прокрутки до нижней части контейнера.
Было бы здорово, если бы «застрявший» элемент прокручивался вместе с документом и останавливался, как только он достигнет своего нижнего края. Если пользователь прокручивает назад, то же самое происходит снова, но в обратном порядке.
ПримерыTLDR; Есть библиотека (StickyKit), что делает то, что я ищу, но плохо работает с новой асинхронной прокруткой.
JSFiddleс StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (это то, что я описываю, но плохо работает, см. ниже)
JSFiddle сродные position: sticky - https://jsfiddle.net/cibulka/np6afe9c/1/ - https://jsfiddle.net/cibulka/pxz6e0qv/ - (это не так)
Я был счастливым пользователем StickyKit в течение долгого времени. К сожалению, это не очень хорошо работает сасинхронная прокрутка, который используется все большим количеством браузеров для повышения производительности. Например, с новым Firefox Quantum (57) StickyKit практически невозможно использовать.
Я создал проблему в StickyKit Github, но автор, похоже, отказался от пакета:https://github.com/leafo/sticky-kit/issues/252
Из-за этого я вынужден отказаться от StickyKit и перейти на нативныйposition:sticky (заполненныйStickyFill). К сожалению, есть пара вещейposition:sticky не могу сделать, и это один из них.
Есть еще одна проблема, с которой я столкнулсяposition:sticky: Позиция липкая: наложение
Рекомендация, в основном, как подойти к этому вопросу. Я готов использовать другую библиотеку JS / jQuery, писать свой собственный код или использовать какой-нибудь изворотливый CSS-хак для взломаposition:sticky функциональность.