sticky position is not working in reactjs
So I make like this
It stops at 5% but when I scroll it goes away
Code : https://codepen.io/Vicky-clowdy/pen/NWZEOvE
Code : https://codepen.io/Vicky-clowdy/pen/NWZEOvE
17 Replies
div{
position:sticky;
top:5%;
left:0%;
}
position: sticky; positions the element relevant to its parent container so, if the container scrolls out of view, so will the sticky element.
If you want it to be visible at all times, you probably want to use position: fixed:I set overflow auto as very container parent div of component but idk at first, it actually kind of stops and work but now it's not even working
you'll have to share your code in something like codepen, it'll make it a lot easier for folks to help you
it also doesn't necessarily have anything to do with react, position sticky is css and that just interacts with the HTML that react produces
Code is big and confusing with alot of divs
Or can I send the first few lines of code like only 20 lines of code is there before the content i need position sticky
Ok so I want #hotel-details div as position sticky
give #how-to-ask-good-questions a look, this is almost unusable, sorry
a minimal example is usually preferable anyway
Yes, you should really post the actual code and, ideally a simplified "working" example of the corresponding code. This can be the site itself or a codepen (or similar).
A blurry, rotated screen capture photo is not the best way for somebody to understand your issue.
That said, from the code that you did post, the first thing that you need to remove is
overflow: auto;. overflow + postion sticky don't play well together.https://codepen.io/Vicky-clowdy/pen/NWZEOvE
I send that code and give link in question also
There will be an H2 tag div needs to be sticky position
Which is #hotel-details
You mean h1 tag? If so you need to put position on that tag not on the parent 😉
#hotel-details is the parentYeah like from that hotel-details div and below it's contents
When hotel-details div reach top:0 it should stick and content below needs to scroll
In this video , there will be an Mcdelivery image and Below u see 2 details which is
McDonald
none
So that 2 text in a div and I want to be in position sticky
I want that title of restaurants to be at sticky
you need to use position sticky on the elements you want to be sticky. if those two are separate elements i would propose to wrap them in a div and give that div position sticky
In your codepen you are missing a closing tag on the hotel details so it is trying to make everything below sticky. As there is no content below the sticky element the browser considers that the container has reached the end so it scrolls the sticky element out of view.
Yeah , U r right , I did that and thinking about why it's not working but I forget to Remove overflow auto , but now it's working thanks
Thanks , i ask in chatGpt it says try overflow but after I removed that it works thanks