I'm creating a parallax site using stellar.js and am using viewport height to determine the height of elements. Each section is vertically stacked on the section before it, each with height: 50vh On the third container down I am trying to give the inner content a fixed position, so it does not move while the rest of the site moves around (and over) it. However I am struggling to figure out how to achieve this.
I've tried giving it top: 125vh and used top: 50% which is as close as I've got but the effect is undesirable and I've had issues with overlapping, which may be a separate issue (but one I may run into with any fix, so help is appreciated). The desired effect can be seen on this site http://www.mohi.me/ in the about section. Thanks!