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

OR

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

New Fiddle

Answer 2

尝试将其添加到这样的事件监听器：

var eventTriggered=false;
$(document).on( 'scroll', function(){
    if($(document).scrollTop() > 400 && !eventTriggered) {
        alert("success");
        eventTriggered=true;
    }else if($(document).scrollTop() < 400){
        eventTriggered=false;
    }     
});

这个有效

如果带有scrolltop的语句不起作用

2 个答案: