如何在不使用 .animate() 的情况下顺利移动 div？答案

【问题标题】：How can I move a div smoothly, without using .animate()?如何在不使用 .animate() 的情况下顺利移动 div？
【发布时间】：2015-01-14 16:33:16
【问题描述】：

我正在尝试设置一个在向下滚动时移开的 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'
            });
        }
    });
});

在这里提琴：http://jsfiddle.net/Lh42w94f/

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

我还找到了使用百分比计算基于滚动移动 div 的解决方案，但所有这些解决方案都会无限移动 div（例如：Move div horizontally when scroll vertically ( jquery or CSS3)）。但是，我只想将它移动 -150 像素然后停止。

任何想法将不胜感激！

【问题讨论】：

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

标签： jquery

【解决方案1】：

为了防止.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'
        });
    }
});

小提琴：http://jsfiddle.net/Lh42w94f/2/

或者，您可以简单地使用 CSS 过渡，然后使用 .css() 更改您的值。

【讨论】：