Scrolling with javascript and 'position: sticky' div

user_1906245 0
Viewed 128

I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.

right column is fixed

The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.

I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list. Any idea how to fix it?

enter image description here

https://codesandbox.io/s/scrolling-with-react-yq81r

reactjs sticky css javascript
1 Answers

I change a couple of code on CodeSandbox.

.right {
  background-color: #cacaca;
}

.right ul {
  top: 0;
  position: sticky;
}

If I understood correctly this gonna work.

user_142060190
Related