How to fix a section in viewport while scrolling and continue to next div after content scroll completed?

Question

I'm not sure whether my question is properly phrased, so I will try to get into the details here as best as I can.

Let's assume I have a normal page with a few sections: 1,2,3, and 4. Each section has their content, but let's say section 3 has a huge amount of content and what I am trying to do is fix section 3 to my viewport height when I reach that section and then overflow the content. Once I finish scrolling through the content, then I move to section 4 .

I have tried a few things but I can't seem to get it right and I honestly have no clue what to search for.

Here's a code snippet I tried: http://jsfiddle.net/h0u5zxqt/1

In that example, you can see the issue with section 3. I can't see section 4 if I apply this technique. So preferably, I would like to overflow content of section3 until I reach the end and then move to section4 .

Sketch.com has a good example of what I'm trying to achieve on their TOS page. You can see how the Terms scroll while the sidebar on the right sticks until end of the section and then page continues: https://www.sketch.com/tos/

Answer 1

Have a look at this Intersection Observer API .

Step 1 - On the container of section3, add an ID and observe it using the mentioned API. When it reaches the top of the viewport, Add a class that will add position fixed and overflow-y as scroll.

Step 2 - Set another observer to observe the last element. Once that's in the viewport, you can remove the fixed class from section 3.