css переход в липкое меню не работает

Question

У меня проблема с анимацией в липком меню. CSS изменен, но не с переходом. У кого-нибудь есть идея, почему?

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

И 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

Причина у вас нет перехода происходит потому, что вы не имеете начальное свойство, определенное для того, чтобы перейти к. Попробуй это.

.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; 
} 

Надеюсь, что работает!

Answer 2

Вам нужно добавить unit за ваши тайминги. 0.3 недействительно, оно должно быть чем-то вроде 0.3s или 300ms. Тогда будет работать background-color, но для перехода height вам нужно добавить значение по умолчанию в ваш класс .navbar-fixed-top css.

$(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 3

Это должно разобраться. Сохраните CSS, исключите только части transition.

$(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'); 

    } 
     }); 

или вы можете попробовать добавить единицы времени, как вы должны к вашему 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; 
    }