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

Question

I'm trying to set up a div that moves out of the way on scroll down. But only by -150px, so it moves out of the way on scroll, and when the page comes back to the top, the div comes back into full view.

I'm doing this by using the css TOP property, and setting it to -150px and then back to 0px. This works fine, but looks very choppy when it's done. Here is the code:

$(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'
            });
        }
    });
});

Fiddle here: http://jsfiddle.net/Lh42w94f/

I can't use animate, because animate seems to fire on every scroll event, so if you scroll down, then back up, the scroll down animation will fire 100x before, the scroll up function fires and then returns the div back into position. I can't come up with a good solution to use animate in this case.

I've also found solutions that use percent calculation to move the div based on scroll, but all of those keep moving the div infinitely (Example: Move div horizontally when scroll vertically ( jquery or CSS3) ). But, I only want to move it -150px and then stop.

Any ideas would be greatly appreciated!

Answer 1

To prevent the .animate to trigger multiple times, you have to put a flag. Just like this :

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'
        });
    }
});

Fiddle : http://jsfiddle.net/Lh42w94f/2/

Alternatively, you could simply use the CSS transition and then change your value with .css() .