Jquery 如何在不使用.animate（）的情况下平滑移动div？

我正在尝试设置一个向下滚动时移动到一边的div。但是只有-150px，所以它会在滚动页面上移动，当页面返回到顶部时，div会返回到全视图

我使用css TOP属性，将其设置为-150px，然后返回到0px。这工作很好，但完成后看起来很不稳定。代码如下：

$(document).ready(function () {
    var $mydiv = $('#movablediv');

    $(window).scroll(function () {
        if($(window).width() >= 641){
            if ($(this).scrollTop() > 100) {
                $mydiv.css({
                    'top': '-150px'
                });
            } else {
                $mydiv.css({
                    'top': '0px'
                });
            }                

        } else {
            $mydiv.css({
                'top': '0px'
            });
        }
    });
});

在这里拉小提琴：

我不能使用animate，因为animate似乎在每个滚动事件中都会启动，所以如果向下滚动，然后向上滚动，向下滚动动画将在之前启动100倍，向上滚动功能启动，然后将div返回到位置。在这种情况下，我想不出一个好的解决方案来使用动画

我还发现了一些解决方案，它们使用百分比计算来根据滚动移动div，但所有这些方法都会无限地移动div（例如：）。但是，我只想移动它-150像素，然后停止

---

任何想法都将不胜感激

要防止

.animate

多次触发，必须设置一个标志。就这样,

var $mydiv = $('#movablediv');
var flag = true;
$(window).scroll(function () {
    if($(window).width() >= 641){
        if ($(this).scrollTop() > 100) {
            if(flag === true)
                $mydiv.stop().animate({
                    'top': '-150px'
                });

            flag = false;
        } else if(flag === false){
            $mydiv.stop().animate({
                'top': '0px'
            });
            flag = true;
        }                

    } else {
        $mydiv.css({
            'top': '0px'
        });
    }
});

小提琴：

---

或者，您可以简单地使用CSS转换，然后使用

.CSS（）

更改您的值。您是否可以在其中设置一个标志，以检测您当前是否正在制作动画，如果是，请不要在滚动处理程序中执行任何操作？@ajp15243我已经考虑过这一点，但不起作用，因为如果您想象，如果您向下滚动并快速向上滚动，“move div-150px”动画正在运行，因此它会停止任何其他动画，即使您已经回到页面顶部，“move div to 0px”动画也不会触发。