アニメーションはページのスクロールでは機能しません

Question

私はピンクとスカイブルーの2つのdivを持っていますが、それらの高さと幅を同じにします。ピンクdivは私の画面の高さをほぼカバーしています。スクロールバーが空の青色に達すると、右に青いdivが表示され、そのスクロールバーがそのdivを離れるとき、divが元の位置に戻るようにします。あなたはこのロジックを適用することができます

$(document).ready(function(){ 

$(window).scrollTop(function(){ 

$(this).scroll(function(){ 

var scrollTopOrBottom = $(document).height() - $(window).height() - $(window).scrollTop(); 

    if(flag === 0 && scrollTopOrBottom < 1256){ 
    $('#blueDiv').animate({right: '200px'}, function(){ 
     flag = 1; 
    }); 
} 

if(flag === 1 && scrollTopOrBottom < 740){ 
    console.log(scrollTopOrBottom); 
$('#blueDiv').slideLeft(); 
    flag = 0; 
    }  

    }); 
    }); 

}); 

JS FIDDLE

Answer 1

：

1. 使用transitionそのため、このようないくつかのCSS要素をアニメーション化する：

   #blueDiv { 
       width: 50%; 
       height: 100px; 
       background-color: blue; 
       position: absolute; 
       left:0; 
       transition:left 2s linear; 
   } 
   #blueDiv.right { 
       left:50% 
   } 
   

2. jQueryのチェック付きの要素空が上からどれだけ離れていて、eをトリガするか

   $(window).scroll(function() { 
       var offT = $('#two').offset().top - $(window).height(), 
        scrT = $(window).scrollTop(); 
       if(scrT >= offT) { 
        $('#blueDiv').addClass('right') 
       } else { 
        $('#blueDiv').removeClass('right') 
       } 
   }); 
   

---

Jquery Demo