Position the image to be fully visible in the viewport and disappear on scoll
I have this mascot... I want it to be fully visible on the viewport but when I reach the green grass it should go along with the grass. I managed to have it go with the grass but I am not able to make it fully visible. I tried position fixed but it remains fixed when we reach the end of the container
I tried with js but still no solution.
2 Replies
Try sending a screenshot and a code snippet of your problem, we can help more then
I am not completely certain that I understand what you are describing. In general, if you want something to appear in the same spot for some portion of scrolling and resume scrolling after a certain point, this can be done using position:sticky, but you have to structure things correctly for this to work. It is also possible using an intersection observer or with an event listener for the scroll event, but the pure CSS solution is generally sufficient.