Javascript 尝试在向上滚动页面时设置div动画_Javascript_Jquery_Html_Css

Javascript 尝试在向上滚动页面时设置div动画

javascript jquery html css

Javascript 尝试在向上滚动页面时设置div动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图找出当我向上滚动页面时，element2没有收缩到300像素的原因。当我向下滚动时，它会增长，但当我向上滚动时，它不会收缩。我也很好奇为什么当我在滚动区域时，宽度有时会自动切换（就像延迟反应）在animate（）之前添加stop（）。它可以防止动画队列累积并导致奇怪的行为。 JS $（文档）.ready（函数（）{ var lastSCroll=0； $（窗口）。打开（“滚动”，函数（）{ var scrolled=$（窗口）.scrollTop（）；如果（滚动>470&&滚动770

我试图找出当我向上滚动页面时，

element2

没有收缩到300像素的原因。当我向下滚动时，它会增长，但当我向上滚动时，它不会收缩。我也很好奇为什么当我在滚动区域时，宽度有时会自动切换（就像延迟反应）

在

animate（）

之前添加

stop（）。它可以防止动画队列累积并导致奇怪的行为。

JS
$（文档）.ready（函数（）{
var lastSCroll=0；
$（窗口）。打开（“滚动”，函数（）{
var scrolled=$（窗口）.scrollTop（）；
如果（滚动>470&&滚动<1150）{
$（“.element2”）.show（“slow”）.css({
“顶部”：滚动+30
});
}
如果（滚动>770&&scrolled<1150&&scrolled>lastSCroll）{
$（“.element2”）.stop（）.animate({
“宽度”：“500px”
})
}
如果（滚动>770&&滚动<1150&&滚动<上次滚动）{
$（“.element2”）.stop（）.animate({
“宽度”：“300px”
})
}
$（“.display”）.html（滚动+”：lastScroll-->“+lastScroll）
lastSCroll=已滚动；
});
});

$(document).ready( function(){
        var lastSCroll =  0;
        $(window).on("scroll", function(){
            var scrolled = $(window).scrollTop();
            if(scrolled  > 470 && scrolled <1150){
                $(".element2").show("slow").css({"top" : scrolled + 30});
            }
            if( scrolled > 770 && scrolled < 1150 && scrolled > lastSCroll){
                $(".element2").animate({"width" : "500px"})
            }   
            if(scrolled > 770 && scrolled < 1150 && scrolled < lastSCroll){
                    $(".element2").animate({"width" : "300px"})
                }
                $(".display").html(scrolled + ": lastScroll--> " + lastSCroll)

            lastSCroll = scrolled ;
  });

<body>
<div class="element">Test</div>
<div class="element2">TEST 2</div>
<div class="display"></div>
<div class="firstCont"></div>
<div class="secondCont"></div>
<div class="thirdCont"></div>
<div class="fourthCont">4th</div>

    *{
        margin: 0;
        padding: 0;
    }
    .firstCont{
        height: 100vh;
        background: pink;
    }
    .display{
        position: fixed;
        top: 0;
        right: 0;
        padding: .5em 1em;
        background: rgba(120,0,0,0.3);
        z-index: 5;
    }
    .secondCont{
        height: 100vh;
        background: hotpink;
    }
    .thirdCont{
        height: 100vh;
        background: seagreen;
    }
    .fourthCont{
        height: 100vh;
        background: skyblue;
    }
    .element{
        position: absolute;
        width: 300px;
        background: blue;
        height: 200px;
        display: none;
    }
    .element2{
        background: gold;
        width: 300px;
        height: 200px;
        position: absolute;
        display: none;
    }

$(document).ready(function () {
    var lastSCroll = 0;
    $(window).on("scroll", function () {
        var scrolled = $(window).scrollTop();
        if (scrolled > 470 && scrolled < 1150) {
            $(".element2").show("slow").css({
                "top": scrolled + 30
            });
        }
        if (scrolled > 770 && scrolled < 1150 && scrolled > lastSCroll) {
            $(".element2").stop().animate({
                "width": "500px"
            })
        }
        if (scrolled > 770 && scrolled < 1150 && scrolled < lastSCroll) {
            $(".element2").stop().animate({
                "width": "300px"
            })
        }
        $(".display").html(scrolled + ": lastScroll--> " + lastSCroll)

        lastSCroll = scrolled;
    });
});