多个动作div向上移动 [英] Multiple Actions div moves up

问题描述

我想用动画创建以下内容.有一个我无法解决的问题.

I would like to create following things with the animation. There is a problem which I cannot fix.

当我单击红色div时，它会下降，这很好.但是，当我滚动并单击黄色div时，导航会向上移动并消失. .removeAttr('style')也许是解决方案?

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.

当我通过单击红色div下拉div然后向下滚动然后单击黄色div并导航DONT上下移动时，怎么可能呢?

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.

这是我的小提琴:小提琴

/* 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;
});

推荐答案

问题是这样的:

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

将其更改为

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

因此，当您点击黄色的 div

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

这篇关于多个动作div向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！