Move Div element from one to another when page scrolled

I have seen a few similar to what I am looking for but not exactly the same.

So what I am trying to do is move elements from within one parent div to another but only once the user has scrolled a certain amount down the page. So once the user has reached a point on the page the elements will then move to another and then fade in at the very top of the page.

So far I have been able to create the div element and get this to show at the top of the page but only once the user has scrolled down 600. What I now need to do is once this element appears to move other div elements on the page to appear within it. Not sure if I am explaining this very well or not!

So if you look at the code below what I want to do now is to move all of the div class "Test" to move within the element of "Top" once the user has scrolled down and this appears. And then if the user scrolls back up again the "Top" element disappears and the "Test" div goes back to it's normal place.