Question

我试图设置一个在向下滚动时移开的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/

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

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

任何想法都将不胜感激！

Answer 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()更改您的值。

如何在不使用.animate（）的情况下顺利移动div？

1 个答案: