Multiple Actions Div Moves Up

I would like to create following things with the animation. There is a problem which I cannot fix. When I click on the red div, it goes down which is fine. But when I scroll and cl

Solution 1:

The problem is this:

$(".ab").click(function () {
    anim10();
});

change it to

$(".ab").click(function () {
    if ($(window).scrollTop() == 0) {
        anim10();
    }
});

so it checks if the user is at the top of the page before it closes when you click the yellow div.

Demo