Javascript 如何使用动画设置修复菜单

这是我的小提琴：

现在，当菜单得到修复时，它不会像这样平滑：

---

有什么想法吗？我的代码有什么问题？

可能您会接受我的更新：

我所做的： 1.您需要检查动画的功能是否已经运行（否则每次滚动都会调用它）。这可以通过检查0或1的一些外部变量来完成（它将显示动画是否运行） 2.我使用的不是“animate”函数，而是slideDown（）-我认为这也很有趣，当然，你也可以使用animate

下面是我的更新代码：

var AlreadyRun=0;  
$(document).ready(function(){
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 110) {
            //$('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');
            if(AlreadyRun == 0){
                AlreadyRun=1;
                //alert('function starts, AlreadyRun='+AlreadyRun);
            $('.menu-container').hide().addClass( "fix-menu" ).slideDown('slow');

            }
        } else {
            AlreadyRun=0;
            $('.menu-container').removeClass("fix-menu");

        }

    });
});

我还认为CSS中不需要“转换”，所以我也更新了CSS：

.menu-container {
   /* transition: all .3s ease-in-out; */
    background:red;
    margin-top:0;
}

.fix-menu{

    /* transition: all .3s ease-in-out;*/
    box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
    height: 54px;
    left: 0;
    top:0;
    overflow: hidden;
    position: fixed;
    right: 0;
    z-index: 1500;
    /* transition: all 0.2s ease-in; */


}

希望这是你所需要的

检查这把小提琴：

您可以在“Cointener”菜单的Top属性中添加一个位置，这样您的代码就能顺利运行。

CSS转换解决方案

var fixed=false；
$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y>110）{
如果（！固定）
{
固定=正确；
$（'.menu container'）.addClass（“修复菜单”）；
}
} 
其他的
{
固定=假；
$（'.menu container'）.removeClass（“修复菜单”）；
}
});

.menu容器{
过渡：顶部。3s轻松进出；
背景：红色；
边际上限：0；
顶部：-54px；
}
.修复菜单{
长方体阴影：0 5px 10px 0.5px rgba（0,0,0,0.1）；
高度：54px；
左：0；
溢出：隐藏；
位置：固定；
右：0；
z指数：1500；
排名：0；
}

jQuery动画解决方案

var fixed=false；
$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y>110）{
如果（！固定）
{
固定=正确；
$（'.menu container'）.addClass（“修复菜单”）.css（'top'，'-54px'）.animate（{top:'0px'}）；
}
} 
其他的
{
固定=假；
$（'.menu container'）.removeClass（“修复菜单”）；
}
});

.menu容器{
背景：红色；
边际上限：0；
}
.修复菜单{
长方体阴影：0 5px 10px 0.5px rgba（0,0,0,0.1）；
高度：54px；
左：0；
溢出：隐藏；
位置：固定；
右：0；
z指数：1500；
}

我对您在过渡过程中试图实现的目标感到困惑。这就是过渡css3动画所做的：检查演示链接、菜单“用过渡修复”、“滑出”或其他什么。我们可以用动画代替滑下过渡吗？是的，但它需要CSS更新。看看这里：出于某种原因，我在前面的评论中看到了一个错误的链接，这里是正确的链接：另一个更新：尽可能远。菜单容器获取属性“style”，参数“top:0”（动画后，此参数获取“fix menu”，但当它被删除时，“style”继承“menu container”。如果不删除此样式，则如果您前后滚动，动画将不起作用。因此，这是最后一个有效的更新：我还在那里编写了调试窗口，您将在不需要时删除它，不是吗？。。

.menu-container {
   /* transition: all .3s ease-in-out; */
    background:red;
    margin-top:0;
}

.fix-menu{

    /* transition: all .3s ease-in-out;*/
    box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
    height: 54px;
    left: 0;
    top:0;
    overflow: hidden;
    position: fixed;
    right: 0;
    z-index: 1500;
    /* transition: all 0.2s ease-in; */


}

.menu-container {
  transition: all .3s ease-in-out;
  background:red;
  margin-top:0;
  top:-110px;  /* add this */
}