I would like 'Headinggg" and "1" to be visible at the start of the pinning of  ".head" and as you scroll the other headings fade in and out into view.  Right now, It's working except for "Headinggg" isn't fading out even though '1' is. When I changed it  opacity: i === 0 ? 0 : 1 it create a big backspace between "heading 2" and "headingg 1".  How would I fix this? See the Pen MWrZWjW by HumbleB (@HumbleB) on CodePen