Jquery CSS class 动画块到固定元素

Question

我有一个导航栏，当它滚动超过 250px 标记时，我应用 "fixed-top" CSS class 并在它低于 250px 时将其关闭，但它非常有用你的脸看起来真的很紧张所以我希望它在应用和删除 class 时滑入和滑出。任何帮助都会很棒。

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 class，然后设置 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

Jquery CSS class 动画块到固定元素

Jquery CSS class animate block to fixed element

jquery

jquery-animate