Question

这是我的小提琴：http://jsfiddle.net/k3AHM/23/

$(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 110) {
            $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');

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

        }

    });

现在当菜单得到修复时，它不是这样的平滑：demo

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

Answer 1

您可能会接受我的更新： https://jsfiddle.net/k3AHM/37/

我做了什么： 1.您需要检查动画的功能是否已经运行（否则将调用每个滚动）。这可以通过检查一些外部var为0或1来完成（它将显示是否运行动画）我没有使用＆＃34; animate＆＃34;函数，但是slideDown（） - 我觉得它也很有趣，当然你也可以使用动画。

所以这是我的更新代码：

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");

        }

    });
});

我也认为你不需要＆＃34;过渡＆＃34;在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; */


}

希望这是你所需要的。

Answer 2

CSS过渡解决方案

http://jsfiddle.net/k3AHM/46/

var fixed = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 110) {
        if (!fixed)
        {
            fixed = true;
            $('.menu-container').addClass( "fix-menu" );
        }
    } 
    else 
    {
        fixed = false;
        $('.menu-container').removeClass("fix-menu");        
    }
});

.menu-container {
   transition: top .3s ease-in-out;
    background:red;
    margin-top:0;
    top: -54px;
}

.fix-menu{
    box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
    height: 54px;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    z-index: 1500;
    top: 0;
}

jQuery动画解决方案

http://jsfiddle.net/k3AHM/47/

var fixed = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 110) {
        if (!fixed)
        {
            fixed = true;
            $('.menu-container').addClass( "fix-menu" ).css('top', '-54px').animate({top: '0px'});
        }
    } 
    else 
    {
        fixed = false;
        $('.menu-container').removeClass("fix-menu");        
    }
});

.menu-container {
    background:red;
    margin-top:0;
}

.fix-menu{
    box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
    height: 54px;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    z-index: 1500;
}

Answer 3

检查这个小提琴： http://jsfiddle.net/k3AHM/24/

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

您可以在menu-cointeiner中为thetop属性添加位置，并且您的代码可以顺利运行。

如何使用动画修复菜单

3 个答案:

CSS过渡解决方案

jQuery动画解决方案