Sticky Sections

Sticky Sections

The parent container is sticky to the bottom, this gives it the swipe up effect. Usually position fixed is relating to the body and does not respect the overflow hidden (parent-container), but a bit of css on the parent fixes this. The idea is based on the following solution.

parent-container
position: sticky (bottom: 0)
overflow: hidden
z-index: check order!

parent
position: absolute and full (0%/0%/0%/0%)

child
position: fixed

custom code (see embedd)
<style>
.parent {
-webkit-clip-path: inset(0%);  
-moz-clip-path: inset(0%);
clip-path: inset(0%);
}
</style>

This connects the fixed child to the parent

Sorry for the rather crude "design".