KB: How sticky participants (including inside iFrame) is implemented?

How does sticky participants works?

It is a simple idea that the participants should be kept visible when the top of the diagram scrolls out of the view port. It is demonstrated as below:

sticky-participant.mov

Why is it difficult to implement?

We have a dedicated style for this effect position: sticky. It does not seem difficult at all.

However, we got to know that position: sticky sticks to the viewport. iFrame itself is the viewport. This means when the iFrame scrolls out of the container viewport, the element may well stay static and scrolls out of the container's viewport as well. This means the sticky style has no effect at all.

This can be explained in the following screenshort.