Jquery CSS类动画 block 到固定元素

Question

我有一个导航栏，当它滚动超过 250px 标记时，我应用“固定顶部”CSS 类，并在它低于 250px 时将其取下，但它非常贴近您的脸，看起来非常跳跃，所以我想当应用和删除类时，它会滑入和滑出。任何帮助都会很棒。

var fixedTops = function() {
   $(window).bind('scroll', function() {
     if ($(window).scrollTop() > 250) {
       $('.fd_PageHeader').addClass('fixed-top');
     } else {
       $('.fd_PageHeader').removeClass('fixed-top');
     }
   });
};

fixedTops();

Answer 1

尝试将动画从 display: block 添加到固定元素是无法完成的。

解决这个问题的一个解决方案是使用opacity。首先将其设置为 0，添加或删除 fixed-top 类，然后为 opacity 设置动画。

var fixedTops = function() {
$(window).bind('scroll', function () {
      if ($(window).scrollTop() > 250) {
           if(!$('.fd_PageHeader').hasClass('fixed-top'))
           {
              $('.fd_PageHeader').css({ opacity: '0' }).addClass('fixed-top').animate({
                opacity: 1
              }, 500);
           }
       } else {
           if($('.fd_PageHeader').hasClass('fixed-top'))
           {
               $('.fd_PageHeader').css({ opacity: '0' }).removeClass('fixed-top').animate({
                    opacity: 1
                 }, 500);
           }
       }
    });
};

 fixedTops();

工作中的jsfiddle:Fiddle