4

I tried some packages as well as a jquery solution for the same questiion. (I copied the question because of its good explanation). But I want it in React. Help!!!

Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

  1. Sidebar sits under the header.

  2. As you scroll down the sidebar remains level with the content of the page so that you can scroll through both sidebar and content.

  3. Reach the bottom of the sidebar, the sidebar sticks to the bottom of the viewport (most plugins only allow for sticking to top, some that allow for sticking to bottom don't allow for both).

  4. Reach the bottom, sidebar sits above the footer.

  5. As you scroll back up, the sidebar stays level with the content so you can scroll through the content and sidebar again.

  6. Reach the top of the sidebar, the sidebar sticks to the top of the viewport.

  7. Reach the top and the sidebar sits back below the header.

Here is the link of Original Question : Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

Daksh Beniwal
  • 61
  • 1
  • 1
  • 3
  • Does this answer your question? [Sticky sidebar: stick to bottom when scrolling down, top when scrolling up](https://stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up) – Akshit Mehra Dec 15 '19 at 10:22
  • 1
    @AkshitMehra No... That's why I reposted the question. I want a solution in ReactJS without Jquery. – Daksh Beniwal Feb 04 '20 at 07:55
  • Did you found answer? – Zahid Hassan Shaikot Mar 09 '20 at 08:56
  • @ZahidHassanShaikot No my friend. But there are some packages which can do this. I was updating an older code and packages were not working there. If you are creating a new sidebar then you can go for them. Just search for them. – Daksh Beniwal Mar 11 '20 at 09:00

1 Answers1

0

I was searching for the same and after testing some packages I found react-sticky-box you can see working examples in the link.

Reza Sam
  • 1,264
  • 2
  • 14
  • 29
  • It seems like `sticky` property have a lot of limitations, you can't use `overflow` property on any parents if I understand this correctly https://stackoverflow.com/a/49080822/319375 . I can't imagine big app that can use that npm package, at least it haven't worked for my app – llamerr Feb 18 '21 at 17:41
  • or maybe it wasn't working for me since I used force install with react 17, which `react-sticky-box` not supporting – llamerr Feb 18 '21 at 17:47
  • on the other hand, https://github.com/wiloke1/wil-react-sticky seem to be working (which is also incompatible with react 17, I still used `--force` upon install) – llamerr Feb 18 '21 at 17:51