Question

我希望这个动画只有在我滚动0 - 200区域时才有可能。当我在201区时，这个动画什么都不做。当你点击黄色div时，导航向上移动，但我希望当我点击200个滚动像素以上时导航静止不动。怎么可能？我试图解决这个问题几个小时，但我找不到解决办法。

Updated Fiddle Demo

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

/* MY SOLUTION?! */


$(window).scroll(function() { 
    if ($(this).scrollTop() < 200)
    {
         $("#treest, #treest2, #treest3").click(function() {anim10();});
    } 
    else
    {     
         /*  DO NOTHING ! How is that possible */
    }
});

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

jQuery滚动div动画

0 个答案: