How to Make Scrollable Sticky Sidebar in 5 Minutes

In this episode we're going to talk about how to make a scrollable sticky sidebar (A sidebar that scroll along with main content normally but become "sticky" or "fixed" when reaching the end of sidebar)
Source Code: redstapler.co/how-to-make-a-s...
******** Follow us on ********
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#webdesign #javascript

[@swopnilmaharjan8630]

i actually came to find sth different but this thing felt soo cool to learn so just watching it basically.. thankyou

[@lunaw2584]

thanks for this, it definitely helped!

[@nimaghazi1326]

thank you, man. helped me a lot. But one thing I want to add is when the page is scrolling up, the scrolling action does the same action for the sidebar, not when it reaches the top. You know, like the reverse of scrolling down that before reaching the bottom of the section, the sidebar is scrollable. How can I do this?

[@claygaming3932]

Superb

[@knozz723]

hey is it possible to sycronise the end of the scroll ?

[@to_al1mov]

Cool

[@HuynhLuong227]

wow, may thanks

[@webcoder9029]

Helpful video 👍
#webcoder

[@user-zi2iu5ep4l]

hey,can you show ho to do it with react please?

[@jkarpago78]

Why do not use position: sticky for this? Is there any problem with this property?

[@timgreller]

With position sticky you can stick it to the top or to the bottom. But not both.

[@jkarpago78]

@@timgreller ah, ok, i did not realize about the bottom sticky. Thanks for the answer

[@warpspeed8305]

Is it possible to make with just css?

[@SLRModShop]

Yes, make it fixed with a top 0, a bottom 0, an overflow auto. His concept has a massive flaw, you can't see both the top part of the left side and the bottom side of the right part at the same time (and vice versa). His solution is to have 1 scroll to do 2 things... Meaning that no matter what you're trying to achieve, you will interfere with the other part. So, my technique will have 2 scroll bars, one for the page, another one for the side bar but this is how it should be.

[@DiluculoOrtus]

How do you make it such that if you scroll up on the body you will scroll up on the sixebar so long has you have room, meaning you don't have any lag due to the container of the sticky div.

[@HubertFrey]

@@SLRModShop Yeah, welcome to 00's frames layout

[@SLRModShop]

left part : A, B, C...
right part: 1, 2, 3...
Want to see A and 7 at the same time? Or R and 1 at the same time? Sorry, you can't.
It's a good exercise what you did, but it's terrible UX design. Your right part should be fixed, top and bottom 0 with an overflow auto. There was no need for Javascript when a single small CSS class would have done a better job.

[@achimschmid1224]

Dies sollte ohne JavaScript mit css umsetzbar sein… mit sticky