scrolltop with if less than not work

Question

hello i work to create simple parallax effect but there simple problem that the scroll top with if less not work, i need if the user to scroll to bottom please animate position of flowers to top:-20% left:-20% and if he scroll to top please animate position of flowers to 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> 

Answer 1

Im not quite sure if I understood your problem correctly, but adding a simple .stop() before your .animate() will make your animations work correctly on scroll. But this is a very 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() will end every currently running animation on your element(s). See .stop() jQuery api