Show content after first and the second scroll

I have the following structure: https://codepen.io/naaatasha/pen/KKRXYgZ I want to show the menu on the right after user start to scroll. Then when user continue to scroll, I want to show the next section. How can I do that?

.top-section {
   min-height: 100vh;
   video-background-overlay: rgba(0,0,0,0.18);
   position: fixed;
   z-index: 9;
   top: 0px;
   left: 0px;
   right: 0px;
   overflow-y: scroll;
   overflow-x: hidden;
}