Я работаю над созданием поведения липкой боковой панели, которое будет работать параллельно вертикальному каналу, который очень похож на канал Facebook в настольной сети. position: sticky хорошо подходит для простого случая использования, когда боковая панель короче высоты окна просмотра. Однако, если ваша боковая панель больше, чем область просмотра, на боковой панели должен быть механизм прокрутки, чтобы вы могли видеть нижнюю часть боковой панели при прокрутке вниз по каналу.
Я пытаюсь воссоздать липкую прокрутку боковой панели facebook здесь .
Лучший способ понять желаемое поведение - это протестировать ваш канал в Facebook и уменьшить высоту экрана, чтобы область просмотра была меньше, чем высота боковой панели. Я постараюсь обобщить здесь:
Когда ваш видовой экран выше боковой панели (простой случай)
- Боковая панель ведет себя точно так, как вы ожидаете с позиции: липкий. Боковая панель остается на том же месте и следует при прокрутке вниз и вверх.
Когда ваш видовой экран меньше боковой панели
При первоначальной прокрутке вниз боковая панель прокручивается с фидом (они кажутся зафиксированными вместе) Когда вы добираетесь до нижней части боковой панели, она фиксируется внизу, и при прокрутке вниз больше, боковая панель теперь кажется липкой с фиксированным дном Когда вы теперь прокручиваете назад вверх, боковая панель снова появляется прикрепленной к основному каналу и прокручивается вверх вместе с основным каналом. Когда вы ударяете по верхней части боковой панели, она становится липкой с фиксированной верхней частью. Таким образом, между этими двумя состояниями (верхняя часть фиксируется при прокрутке вверх, нижняя часть фиксируется при прокрутке вниз), боковая панель прокручивается в унисон с основной подачей .
Это очень приятный процесс прокрутки, но его очень трудно воссоздать.
Я выполнил состояния, перечисленные в шагах 1-3 выше, применяя позицию, привязанную к позиции top и при прокрутке вниз, используя события прокрутки и некоторые вычисления высоты области просмотра / боковой панели, чтобы определить разницу высот и отрегулировать значение top css, чтобы оно блокировалось, когда нижняя часть выровнена с экраном (по существу, initialTop - (sidebarHeight - viewportHeight). Я не могу понять шаги 4 и 5. Лучшее, что я мог сделать, - это переходить между двумя значениями top в зависимости от направления прокрутки, но это очень плохой UX.
У меня есть пример макета в песочнице здесь: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
Есть базовый макет c с 2 колонками (левая боковая панель и основная подача). Это реактивный компонент с именем StickyScroll, который окружает столбец и имеет все логики c для обновления значения top. Это может быть совершенно неправильным началом хорошего решения, но любая помощь очень ценится.