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

голоса
0

Я работаю на строительство липкого поведения боковой панели , который будет работать наряду с вертикальной подачей , которая очень похож на ленту facebook на рабочем стол в Интернете. position: stickyхорошо работает для легкого использования случае , когда боковая панель короче , чем высота окна просмотра. Однако , если боковая панель больше , чем видовом потребность боковой панели , чтобы иметь некоторый механизм прокрутки , так что вы можете увидеть в нижней части боковой панели , как вы прокрутите страницу вниз.

Я пытаюсь воссоздать facebook врезки липких прокруток здесь.

Лучший способ понять желаемое поведение, чтобы проверить фид facebook и сократить высоту экрана, чтобы ваш просмотр меньше, чем ваша высоту боковой панели. Я попытаюсь резюмировать здесь:

Когда окна просмотра выше, чем на боковой панели (простой случай)

  1. Боковая панель ведет себя точно так, как и следовало ожидать с позицией: липкой. На боковой панели остается в том же месте и следует, как вы прокрутите вниз и вверх.

Когда окно просмотра меньше, чем на боковой панели

  1. При прокрутке вниз первоначально боковой панели свитки с кормом (они появляются скреплены вместе)
  2. Когда вы дойдете до нижней части боковой панели, он запирает в нижней части, и как вы прокрутите вниз больше, на боковой панели теперь появляется липкой с нижним неподвижным
  3. Когда теперь прокрутить назад вверх, на боковой панели снова появится подключенные к основному корму, и прокручивается вверх с основным кормом. После того, как вы попали в верхней части боковой панели это то липкое с верхней неподвижной.
  4. Так между этими двумя состояниями (сверху фиксируется при прокрутке, снизу фиксируется при прокрутке вниз), на боковой панели прокручивает в унисон с основным кормом.

Это очень хороший опыт скроллинга, но очень трудно воссоздать.

Исполнив состояния , перечисленные в пунктах 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

Там в основной макет с 2 колонками (левая боковая панель и основной корм). И есть реагировать компонент , называемый StickyScrollкоторый оборачивает вокруг колонны и имеет всю логику для обновления topзначения. Это может быть совершенно неправильно начало хорошее решение, но любая помощь очень ценится.

Задан 13/02/2020 в 23:51
источник пользователем
На других языках...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more