Как построить липкое поведение боковой панели, похожее на боковую панель Facebook Facebook ⇐ CSS

[Anonymous]

Я работаю над созданием липкого поведения на боковой панели, которое будет работать вместе с вертикальным каналом, который очень похож на фид на рабочем столе. Положение: Sticky хорошо работает для простого использования, где боковая панель короче высоты видового порта. Однако, если ваша боковая панель больше, чем в виде просмотра, боковая панель должна иметь некоторый механизм прокрутки, чтобы вы могли увидеть дно боковой панели, прокручивая подачу. < /P>

Я есть Попытка воссоздать липкий свиток на боковой панели Facebook. Viewport меньше высоты вашей боковой панели. Я постараюсь подвести итог здесь: < /p>

Когда ваш вид просмотра выше, чем ваша боковая панель (простой случай) < /strong> < /p>


[*] Боковая панель ведет себя точно так же, как и следовало ожидать, с позицией: липкий. Боковая панель остается в том же месте и следует, когда вы прокручиваете вниз и вверх. < /strong> < /p>


Когда вы изначально прокручиваете вниз на боковой панели с помощью подачи (они кажутся фиксированными вместе)
[*] Когда вы попадаете в нижнюю часть боковой панели, она затем блокируется внизу, и, когда вы прокручиваете больше, боковая панель теперь выглядит липкой с нижним фиксированным < Br /> Когда вы теперь прокручиваете обратно, боковая панель снова появляется прикрепленной к вашему основному каналу и прокручивает с основной подачей. Как только вы достигнете верхней части боковой панели, он затем липкий с фиксированной верхней частью. Университет с основным кормом. />
Я выполнил состояния, перечисленные в шагах 1-3 выше, применяя позицию липкой с верхним положением, и когда вы прокручиваете вниз, используя события прокрутки и некоторые расчеты видовой панели/высоты боковой панели. Чтобы определить разность высоты и настраивать значение TOP CSS, чтобы оно блокировалось, когда дно выстраивается с экраном (по сути, начальные стоки - (Sidebarheight - ViewPortheail) . br />
У меня есть пример песочной коробки здесь: https://codesandbox.io/s/fragrant-micro ... arkобразно кормить). И есть компонент React, называемый kickyscroll , который оборачивается вокруг столбца и имеет всю логику для обновления значения Top . Это может быть совершенно неправильным началом хорошего решения, но любая помощь очень ценится.

Подробнее здесь: https://stackoverflow.com/questions/602 ... ed-sidebar