CSS transform not working with jQuery .addClass and .removeClass
<p>I have a top fixed nav that when the user scrolls I load in additional styling like changing it to a white colour.</p>

<p>I'm having an issue with the transform css elements not working. It doesn't animate down like I'm looking to do. I'd like to replicate the same style of this nav from Slack:
<a href="https://slack.com/customers" rel="nofollow">https://slack.com/customers</a></p>

<p>I have the jQuery and CSS below. I've also setup a jsfiddle to see the issue I'm having:
<a href="https://jsfiddle.net/a1Ltya6f/" rel="nofollow">https://jsfiddle.net/a1Ltya6f/</a></p>

<p>My current jQuery looks like this:</p>

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

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

    } else {

      $('.top').removeClass('fixed');
    };
  });
});
</code></pre>

<p>This is my CSS:</p>

<pre><code>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;
}
</code></pre>