javascript - 带scrolltop的if语句不起作用

Question

我试图在网页位于页面的某个部分时制作动画。我查看了其他人的查询，我的问题类似，但不起作用。

这是代码:

if($('html,body').scrollTop() > 400) {
   $('.fish_one').animate({"margin-left":"+=65%"},1000);
    $('.fish_two').animate({"margin-left":"-=10%"},1000);
    $('.left').animate({"opacity":"+=1"},1000); 
    $('header').css({"background-color":"#fff"});
    $('header a').css({"color":"#94d9f8"});

}

Answer 1

您需要在每次页面滚动时检查 if 语句，而不仅仅是在加载时检查。使用 $(window).scroll(function(){

$(window).scroll(function(){
    if($(window).scrollTop() > 400) {
        alert("lower");
    }
});

Fiddle

编辑:防止函数重复:

var pos = false;
$(window).scroll(function(){
    if(($(window).scrollTop() > 400) !== pos ){
        alert("changed");
    }
    pos = $(window).scrollTop() > 400;
 });

或者

var pos = false;
$(window).scroll(function(){
    if(($(window).scrollTop() > 400) && !pos ){
        alert("just passed breakpoint");
    }
    pos = $(window).scrollTop() > 400;
 });

New Fiddle