的 Demo

Question

我想用动画制作以下内容。有一个我无法解决的问题。

当我点击红色div时，它会下降，这很好。但是当我滚动并单击黄色div时，导航会向上移动并离开。 .removeAttr（＆＃39; style＆＃39;）可能是一个解决方案吗？

我为此构建了一个函数，因此当我滚动导航时会向上移动。

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

这是我的小提琴：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

问题在于：

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

将其更改为

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

因此，当您点击黄色 div 时，它会检查用户是否在页面顶部关闭之前。

多个动作div向上移动

1 个答案:

的 Demo