Jquery 在向下滚动和向上滚动时设置动画

我试图通过动画将一组按钮从一个相对位置移动到每个滚动条上的一个固定位置

HTML

<div class="menu">
    <button class="button"></button>
    <button class="button"></button>
</div>

JS

.button {
    display: inline-block;
    position: relative;
    margin: 3px;
    height: 56px;
    width: 56px;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.grouped {
    z-index: 1000;
    position: fixed;
    top: 31px;
    right: 20px;
}

var scrollFlag = false;

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = window.scrollTop;

    if(menu.offset().top <= (scrollTop + 50)) {
        if(scrollFlag == false) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });

            scrollFlag = true;
        }
    } else {
        $("#intro div.menu button").each(function() {
            $(this).removeClass("grouped");
        });

        scrollFlag = false;
    }
});

var scrollFlag=false；
$（窗口）。滚动（函数（）{
变量菜单=$（“.menu”），
scrollTop=window.scrollTop；
if（menu.offset（）.top那么JQuery的函数呢

您可以执行以下操作：

$("#myButton").animate({         
    //this value would either be how far you want it to move, 
    //or the final position; I'm not sure which.
    top: 50px; 
    left: 50px;
}, 500); //the number here is the time in ms for the animation to play.

我认为这不是个好主意，但无论如何

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = $(window).scrollTop();
    if($('.button:nth-child(1)').css('position') !== 'fixed'){
        if(menu.offset().top <= (scrollTop + 50)) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });
        }
    } else {
        if(scrollTop  <= 31){
            $("div.menu button").each(function() {
                $(this).removeClass("grouped");
            });
        }
    }
});

$（窗口）。滚动（函数（）{
变量菜单=$（“.menu”），
scrollTop=$（窗口）.scrollTop（）；
if（$（'.按钮：第n个子（1）'）.css（'position'）！='fixed'）{
if（menu.offset（）.top谢谢你的回答。我相信这是你希望它移动的程度。但这是相对于容器的…我认为，因此它将具有与我的代码相同的效果。你想用两个按钮固定菜单..或固定每个按钮..如果你固定每个按钮，固定位置将使它们相互重叠是的，这是我想要的，让它们彼此重叠。效果就像一堆东西聚集在一起。我打算使用第二个功能，打开一个菜单，所有的东西都在里面。这是一种很酷的方式，可以从页面中的任何地方访问它们。谢谢，你看到了这样的动画吗？它就像我的代码一样跳跃锿。