Question

我有一个导航栏，当它滚动超过250px标记时，我应用＆＃34;固定顶部＆＃34; 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

Jquery CSS类动画块到固定元素

1 个答案: