Parallax may not be the best term to explain what I'm aiming for, but I am struggling to find an alternative way to phrase it.
Essentially, I have a header section that remains fixed, allowing the rest of the page to slide over the top as intended.
However, I would like to implement a similar section in the middle of the page.
The sequence of events I am trying to accomplish is:
- - User at the top of the page with the header fully visible and taking up the full height
- - User scrolls down, causing the content of the page to slide over the header
- - When the user reaches LAYER A near the top of the page, this layer should remain fixed in position
- - As the user continues scrolling down the page, LAYER B (the rest of the page) should continue to slide over LAYER A, leaving only about 75px of the div visible
I have created an image to illustrate this concept.
I attempted to use relative positioning with transform, but it did not work as desired. Ideally, I would like to achieve this effect using only CSS, although I am open to utilizing jQuery if necessary.
Thank you in advance for any assistance!
EDIT 2: I have managed to achieve the desired effect after possibly overthinking it. While my solution may be somewhat hacky and there could be better methods, I was able to accomplish this using the following code:
$(window).scroll(function() {
if ($(".nav_bar").offset().top > 1057) {
$(".fixedsection_wrapper").addClass("fixedposition"); }
else {
$(".fixedsection_wrapper").removeClass("fixedposition");
}
});
This simply applies 'position: fixed' to "Layer A" when it intersects with the nav bar, resulting in behavior consistent with the diagram.