如果小于不起作用，则滚动顶部

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