うまく動作しない場合スクロールトップ

Question

こんにちは私は単純な視差効果を作成するために動作しますが、スクロールトップが動作していない場合、私は必要があります。 20％左：-20％、上にスクロールすると、花の位置を上に移動してください：0;左：0;

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
     var flowersLeft = $(".flowers-topleft") 
 
     if ($(window).scrollTop() > 50){ 
 
      $(flowersLeft).animate({ 
 
       top: "-18%", 
 
       left: "-20%" 
 
      }, 600); 
 
      $("body").css("background", "green"); 
 
     } 
 
     else { 
 
      $(flowersLeft).animate({ 
 
       top: "0", 
 
       left: "0" 
 
      }, 600); 
 
      $("body").css("background", "black"); 
 
     } 
 
    }) 
 
})

html{ 
 
       height:100%; 
 
      } 
 
      body{ 
 
       height:6000px !important; 
 
       background-color:#ff0000; 
 
      } 
 
      .flowers-topleft { 
 
       width: 50%; 
 
       height: 50%; 
 
       position:fixed; 
 
       top:auto; 
 
       left:auto; 
 
       background-image: url("http://cafefrida.ca/img/flowers-topleft.png"); 
 
       background-repeat: no-repeat; 
 
       background-position: right bottom; 
 
       background-size: cover !important; 
 
      } 
 
      .flowers-topright { 
 
       width: 50%; 
 
       height: 50%; 
 
       position: absolute; 
 
       top: 0; 
 
       right: 0; 
 
       background-image: url(http://cafefrida.ca/img/flowers-topright.png); 
 
       background-repeat: no-repeat; 
 
       background-position: left bottom; 
 
       background-size: cover !important; 
 
      } 
 
      .flowers-bottomright { 
 
       height: 58%; 
 
       width: 50%; 
 
       position: absolute; 
 
       bottom: 0; 
 
       right: 0; 
 
       background-image: url(http://cafefrida.ca/img/flowers-bottomright.png); 
 
       background-repeat: no-repeat; 
 
       background-position: left top; 
 
       background-size: cover !important; 
 
      } 
 
      .flowers-bottomleft { 
 
       height: 50%; 
 
       width: 50%; 
 
       position: absolute; 
 
       bottom: 0; 
 
       left: 0; 
 
       background-image: url(http://cafefrida.ca/img/flowers-bottomleft.png); 
 
       background-repeat: no-repeat; 
 
       background-position: right top; 
 
       background-size: cover !important; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="flowers-topleft"></div> 
 
    <div class="flowers-topright"></div> 
 
    <div class="flowers-bottomright"></div> 
 
    <div class="flowers-bottomleft"></div>

Answer 1

イムかなり私が正しくあなたの問題を理解している場合必ず、しかし、あなたの.animate()があなたのアニメーションをスクロールで正しく動作するようになる前に、簡単な.stop()を追加することではありません。しかし、これは非常に基本的な「視差効果」です。

$(document).ready(function() { 
    $(window).scroll(function() { 
     var flowersLeft = $(".flowers-topleft") 
     if ($(window).scrollTop() > 50){ 
      $(flowersLeft).stop().animate({ 
       top: "-18%", 
       left: "-20%" 
      }, 600); 
      $("body").css("background", "green"); 
     } 
     else { 
      $(flowersLeft).stop().animate({ 
       top: "0%", 
       left: "0%" 
      }, 600); 
      $("body").css("background", "black"); 
     } 
    }) 
}) 

.stop()あなたの要素に現在実行中のアニメーションがすべて終了します。 .stop() jQuery api