To control animations and and/or pin elements when scrolling, you need to understand the following properties:
- this.dom.clientHeight: scene client height (in pixels), the height of the client area in which elements are shown. If the scene height is 100%, and no horizontal scrollbar, it’s also the viewport height.
- this.dom.scrollHeight: scene scroll height (in pixels), the height of the scene content, including content not visible on the screen due to overflow.
- this.dom.scrollTop: scene scroll top (in pixels), the number of pixels that the scene content is scrolled.
- doc.getElement(‘element name’).dom.offsetTop: offset top position of an element (in pixels), distance from top edge of the element to top edge of its parent (scene if it’s not in a group)
So you can set pin/unpin position in % and convert to pixels based on above properties, or use an element (with position in %) as pin/unpin position and get its offsetTop to convert to pixels.
About the jerky issue, I see that it only occurs on IE and Edge. It seems that these browsers repaint before firing scroll event. It’s the issue of these browsers, we can’t fix it yet.