粘滞菜单上的CSS过渡不起作用

Question

I have a problem with animation at sticky menu. CSS is changed, but not with transition. Anybody has an idea why?

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky");
    } else {
        $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky");
    }
});

And CSS:

.navbar-fixed-top {
  transition: 0.3 all ease;
  -webkit-transition: 0.3 all ease;
}
.navbar-fixed-top.navbar-fixed-top-sticky {
  background: #601a36;
  height: 80px;
  transition: 0.3 all ease-in-out;
  -webkit-transition: 0.3 all ease-in-out;
}

Answer 1

You need to add a unit behind your timings. 0.3 is not valid, it has to be something like 0.3s or 300ms . The background-color would work then, but for a height transition you need to add a default value in your .navbar-fixed-top css class too.

 $(window).scroll(function() { if( $(this).scrollTop() > 50 ) { $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky"); } else { $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky"); } }); 

 /* --- just for demo --- */ .navbar-fixed-top { position: fixed; width: 100%; line-height: 20px; background: #ccc; } .navbar-fixed-top-sticky { line-height: 80px; } .content { height: 1000px; } /* --- just for demo --- */ .navbar-fixed-top { height: 20px; /* default height */ transition: 0.3s all ease; /* added unit */ -moz-transition: 0.3s all ease; /* added unit */ -webkit-transition: 0.3s all ease; /* added unit */ } .navbar-fixed-top-sticky { background: #601a36; height: 80px; transition: 0.3s all ease-in-out; /* added unit */ -moz-transition: 0.3s all ease-in-out; /* added unit */ -webkit-transition: 0.3s all ease-in-out; /* added unit */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-fixed-top">.navbar-fixed-top</div> <div class="content"></div> 

Answer 2

The reason you have no transition happening is because you don't have an initial property defined for it to transition to. Try this.

.navbar-fixed-top {
   transition: 0.3s all ease;
   -webkit-transition: 0.3s all ease;

   background-color: transparent;
   height: 0;
}

.navbar-fixed-top.navbar-fixed-top-sticky {
   background-color: #601a36;
   height: 80px;
}

Hope that works!

Answer 3

This should sort it out. Keep the CSS, only exclude the transition parts.

$(window).scroll(function () {
           if ($(this).scrollTop() > 50) {
              $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky").fadeIn('slow');
           } else {
        $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky").fadeOut('slow');

    }
         });

or you can try adding time units, as you should to your transitions :

.navbar-fixed-top {
       transition: 0.3s all ease;
       -webkit-transition: 0.3s all ease;
    }

   .navbar-fixed-top.navbar-fixed-top-sticky {
       background: #601a36;
       height: 80px;
       transition: 0.3s all ease-in-out;
       -webkit-transition: 0.3s all ease-in-out;
    }