多个动作div向上移动

Question

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 click the yellow div the navigation moves up and is away. Is .removeAttr('style') maybe a solution?

I build a function for that so when I scroll the navigation shifts up.

How is it possible that when i drop down the div with click on the red div then scroll down and then click on the yellow div and the navigation DONT moves up and away.

Here is my Fiddle: Fiddle

/* MAIN FUNCTION */

var $a = $(".a"),
    $b = $(".b"),
    $c = $(".c");

function anim1() {
    $b.animate({width: 395}, {duration: 300, complete: anim2});
}

function anim2() {
    $a.animate({top:"0px"}, {duration: 400});
    $c.animate({top:"0px"}, {duration: 400});
}

$(".b").click(function() {
    anim1();
});

function anim10() {
$c.animate({top:"-50px"}, {duration: 200});
$a.animate({top:"-50px"}, {duration: 200 , complete: anim20});
}

function anim20() {
$b.animate({width: 137}, {duration: 200});
}

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

/* SLIDE UP ONLY MAIN NAVIGATION */

$(window).scroll(function() { 
    if ($(this).scrollTop() < 200)
    {
        $(".example").animate({top:"0px"},{duration: 50,easing: 'easeInOutCubic'});
    } 
    else
    {     
        $(".example").animate({top:"-50px"},{duration: 50,easing: 'easeInOutCubic'});
    }

    return false;
});

Answer 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