CSS-преобразование не работает с jQuery .addClass и .removeClass

Question

У меня есть фиксированный nav nav, который, когда пользователь прокручивает, загружается в дополнительный стиль, например, меняя его на белый цвет.

У меня возникла проблема с элементами css для преобразования, которые не работают. Он не анимируется, как я и хочу. Я хотел бы воспроизвести тот же стиль этого nav от Slack: https://slack.com/customers

У меня есть jQuery и CSS ниже. Я также настроить jsfiddle, чтобы этот вопрос у меня: https://jsfiddle.net/a1Ltya6f/

Мой текущий JQuery выглядит следующим образом:

$(document).ready(function() { 
    $(window).scroll(function() { 
    // 100 = The point you would like to fade the nav in. 

    if ($(window).scrollTop() > 50){ 
     $('.top').addClass('fixed'); 

    } else { 

     $('.top').removeClass('fixed'); 
    }; 
    }); 
}); 

Это мой CSS:

nav.top { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 70px; 
    z-index: 99; 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 
.fixed { 
    -webkit-transform: translate3d(0,-80px,0); 
    -moz-transform: translate3d(0,-80px,0); 
    -ms-transform: translate3d(0,-80px,0); 
    transform: translate3d(0,-80px,0); 
    background: #fff; 
    box-shadow: 0 1px 1px rgba(0,0,0,.1); 
} 

nav.top ul { 
    list-style-type: none; 
    margin: 0 20px 0 0; 
    padding: 0; 
    float: right; 
    line-height: 4.375rem; 
} 
nav.top ul li { 
    display: inline-block; 
} 
nav.top ul a.btn_sticky { 
    color: #404B55; 
    box-shadow: inset 0 0 0 2px #404b55; 
} 
nav.top ul a { 
    color: #404B55; 
    text-decoration: none; 
    display: inline-block; 
    font-size: .9375rem; 
    font-weight: 700; 
    margin-left: 9px; 
    position: relative; 
    cursor: pointer; 
    line-height: 1em; 
    padding: 8px 7px 9px; 
    border-radius: 5px; 
    opacity: .8; 
} 

Answer 1

Eсть код перехода отсутствует (nav.top)

переход: все .4s;

Вы можете настроить время в соответствии с вами для обеспечения плавного.

и добавить СЧ с фиксированным классом в CSS, как этого

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    // 100 = The point you would like to fade the nav in. 
 

 
    \t if ($(window).scrollTop() > 50){ 
 
    \t \t $('.top').addClass('fixed'); 
 

 
    } else { 
 

 
     $('.top').removeClass('fixed'); 
 
    \t }; 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 
nav.top { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 70px; 
 
    z-index: 99; 
 
    -webkit-transform: translate3d(0,0,0); 
 
    -moz-transform: translate3d(0,0,0); 
 
    -ms-transform: translate3d(0,0,0); 
 
    transform: translate3d(0,0,0); 
 
    transition:all .4s; 
 
} 
 
nav.fixed { 
 
    -webkit-transform: translate3d(0,-80px,0); 
 
    -moz-transform: translate3d(0,-80px,0); 
 
    -ms-transform: translate3d(0,-80px,0); 
 
    transform: translate3d(0,-80px,0); 
 
    background: #fff; 
 
    box-shadow: 0 1px 1px rgba(0,0,0,.1); 
 
} 
 

 
nav.top ul { 
 
    list-style-type: none; 
 
    margin: 0 20px 0 0; 
 
    padding: 0; 
 
    float: right; 
 
    line-height: 4.375rem; 
 
} 
 
nav.top ul li { 
 
    display: inline-block; 
 
} 
 
nav.top ul a.btn_sticky { 
 
    color: #404B55; 
 
    box-shadow: inset 0 0 0 2px #404b55; 
 
} 
 
nav.top ul a { 
 
    color: #404B55; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: .9375rem; 
 
    font-weight: 700; 
 
    margin-left: 9px; 
 
    position: relative; 
 
    cursor: pointer; 
 
    line-height: 1em; 
 
    padding: 8px 7px 9px; 
 
    border-radius: 5px; 
 
    opacity: .8; 
 
} 
 

 
.block { 
 
    background-color: #1C90F3; 
 
    height: 1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="top"> 
 
     <ul> 
 
      <li><a href="">Product</a></li> 
 
      <li><a href="">Pricing</a></li> 
 
      <li><a href="">Support</a></li> 
 
      <li><a href="">Create a new team</a></li> 
 
      <li><a href="">Find your team</a></li> 
 
      <li class="sign_in"><a href="" class="btn_sticky">Sign in</a></li> 
 
     </ul> 
 
</nav> 
 

 
<div class="block"></div>

nav.fixed