Twitter clone problem
Someone please help me fix my bug here!š©
I basically want the Column-3 to stop scrolling at the end of the footer links while the column-2 still scrolls just as it is on Twitter desktop view.
I know this is achievable using JS but unfortunately for me, I havenāt learnt JS. So is there a way I can get this solution using css alone??
This is my code
https://codepen.io/Creatorjihm/pen/ZEVVebj
Iāve reduced the code as minimum as possible.
It should behave just like this
10 Replies
Please help someoneš©ā¦
No, nothing comes to mind in how to it solve in css. I think they are recalculating the top and bottom margin of that column, based on the body scroll position. So with JS.
Damnā¦thatās just the remaining piece of the whole puzzleš
Ig I canāt showcase as a completed project until Iāve learnt and implemented JavaScript on it
All the same, thanks for the helpšš½
You can try this. This is the problem of html and css layout.
Thanksā¦Iāll check it out and drop a feedback!
I just tried this solution but the result wasnāt as such that I wantedā¦from this solution the col-2 and col-3 scrolled individually, hence they all stopped at the end of their contents(individually).
Meanwhile the result I wanted was to control both col-2 and col-3 with same scroll (they should scroll together) but when col-3 hits the end of its content, it should stop scrolling while the col-2 continues scrolling until it gets to the end of its content.
I hope this is understandable!
All the same, thanks for the solution as Iāll just make use of it since Iāll have to get the real result using JS which I havenāt gotten knowledge ofā¦Iāll probably update it in the future after learning JS
It's 4AM for me and so there's likely some issues with it and I know it doesn't handle when screens get shorter or taller well (it's fine as soon as you scroll but to be fair Twitter doesn't handle it either). You may want to listen for resize events
Edit: I just viewed on mobile and I realise I didnāt cap the margin and if I pull the screen down the sidebar can go off the screen fixed with a clamp
@z- ::theProblemSolver:: you strictly made use of JS which I havenāt gotten knowledge ofā¦
Iāll just have to pause the project until Iāve gotten some JS basics at least
Thanks for the help anywayšš½
Like others have pointed out itās not possible without JS