向上滚动时使Div返回其原始位置 [英] Make a Div to return to its original position when scrolled up

问题描述

当你向下和向上滚动时，我有一个带动画的div，问题是当我快速向上和向下滚动而不让div完成动画时，div一点一点地从屏幕上方移出。

I have a div with animation when you scrolls down and up, the problem is that when I scroll up and down very fast without letting the div to complete its animation the div little by little gets out of the screen in the upper part.

如果我删除.animate（）函数中的.stop（）并快速向上和向下滚动，div会一直这样做。

If I remove the .stop() in the .animate() function and scroll up and down very fast, the div keeps doing this for a while.

我想在上下滚动时保持动画，唯一的区别是当快速上下滚动时菜单没有离开屏幕，我看起来完全堆栈像这样的溢出问题，但我发现没有任何工作jsfiddle的代码可以在这里找到：

I want to keep the animation when scrolled up and down with the only difference that the menu does not get out of the screen when scrolling up and down fast, I have look thorough stack overflow questions like this one but nothing that I found work the code of the jsfiddle can be found here:

http://jsfiddle.net/QLLkL/4/

$(window).scroll(function(){
    if($(window).scrollTop() > 480 && !animationStarted){
         $("#menu").stop().animate({ "top": "+=180px" }, 1000);
        animationStarted  = true;
    };
    if($(window).scrollTop() < 480 && animationStarted){
         $("#menu").stop().animate({ "top": "-=180px" }, 1000);          
        animationStarted  = false;
    };        
});

推荐答案

http://jsfiddle.net/prollygeek/QLLkL/14/

$(document).ready(function(){
    var animationStarted = false;
    var x=$("#menu").css("top")   
    $(window).scroll(function(){    
        if($(window).scrollTop()>x)
        {
            $("#menu").stop().animate({ "top": x+"px" }, 20);
        }
        else
        {
            $("#menu").stop().animate({ "top": $(window).scrollTop()+"px" }, 20);
        }
        // animationStarted  = true;              
    });
});

这应该可以解决所有问题。

This should fix it all .

这篇关于向上滚动时使Div返回其原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！