固定背景和内容附件

Question

Hey guys I have a fixed background attachment for scrolling uptill two pages of the content after that i want the second page to be fixed and make the third page with a different background to come up covering the second page. How can I make the content of the second page fixed when it comes at the top? So that scroll effect can be appliedm

Answer 1

You have to use Javascript Intersection Observer API. Create an instance of it and set it to observe your 3rd page. On threshold crossing apply the styles you need (like setting position: relative; to both of your pages and then adjusting them via z-index).

Just don't unobserve() on collision so you can roll back changes on, well, scrolling up on your page.