javascript - scrolltop with if less than not work -

hello work create simple parallax effect there simple problem scroll top if less not work, need if user scroll bottom please animate position of flowers top:-20% left:-20% , if scroll top please animate position of flowers top:0; left: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>

im not quite sure if understood problem correctly, adding simple .stop() before .animate() make animations work correctly on scroll. basic "parallax effect".

$(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() end every running animation on element(s). see .stop() jquery api