I’ve got a 70vh section where based on this example I’ve now modified to take 70vh of the height.
Two issues i’m trying to find a solution to.
If i want the section to be sticky when the previous section still has 15vh to go before the section is off the screen, then I need to add top:15vh to the sticky. However, elements relative in the parent above aren’t staying where they should and I want to avoid using absolute positioning. Photo describing issue:
If the height inside the scrolled sticky section is 500vh then the animation looks nice, the user is scrolling quite a bit but there’s a lot of extra space at the bottom. Any ideas? Photo describing issue:
If you want to avoid absolute positioned elements, you should wrap your image inside a div (you should do that anyway, no matter what) and try to position it with flexbox. Small adjustments can still be made with margins, or relative positioning.
With that additional div you have all the freedom you need to position your image properly.
The extra space on bottom is related to the “Section”, I am not sure what you are referring to. Maybe you want to elaborate.
You might change “top:300px” to “top:25vh” on your “.wrap__sticky.sticky.sticky-5” class.
Still, there are some issues which can’t be resolved with your current setup. You should have a closer look on the main structure. You need to wrap your content and sections inside several divs. Please check the example you got inspired from.
Important thing is, you need to know and understand how it works. Since it is a bit more complex, you will run into issues which you can’t resolve, if you don’t understand what is going on in your HTML and CSS.
Really appreciate the time you spent answering this
The image itself, whether in a div or not will only move when the section below is reached and scrolled.
The same happens in the next section because of overflow. So the inner div with 300vh is scrolled and if the section of interest is 100vh, then there’s no issue since the bottom section will scroll up once the top element is done scrolling.
Similarly, the section above the section of interest (where the image is), will actually scroll outside of the viewfinder and the elements won’t be sticky at their position.
To illustrate this I’m going to change the inner sticky from 75vh to 100vh, and remove the position:top of 300 to 0 (public link should now reflect these last two changes). This scrolls fine and we’re unaware of the things going on as we can’t see them. This is actually the problem with the example I’ve found which works flawlessly for 100vh but the moment these sections become smaller, the overflow which is the solution/hack becomes the problem.
Was wondering if you had any idea how to overcome this or in a very high level, a suggestion which I might try and implement.
Just tell me exactly what you want to achieve, e.g. which element/class should do what, when which user interaction is done.
If you don’t mind to list it below -maybe drop me some bullet points- I might have a closer look into it.
