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

我不确定我是否正确理解了您的问题，但在.stop()之前添加一个简单的.animate()会让您的动画在滚动时正常工作。但这是一个非常基本的视差效应＆＃34;。

$(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

滚动顶部如果不是不工作

1 个答案: