CSS 변환이 jQuery .addClass 및 .removeClass와 작동하지 않습니다.

Question

사용자가 스크롤 할 때 흰색 스타일로 변경하는 것과 같은 추가 스타일로로드되는 고정 된 상단 이동 기능이 있습니다.

변환 CSS 요소가 작동하지 않는 문제가 있습니다. 내가 원하는 것처럼 움직이지 않습니다. Slack에서 동일한 nav 스타일을 복제하고 싶습니다. https://slack.com/customers

아래 jQuery와 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

가있다 : 이것은 내 CSS입니다

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

: 는 https://jsfiddle.net/a1Ltya6f/

나의 현재 jQuery를은 다음과 같습니다 : 나는 데 문제를보고 설정을 또한 jsfiddle를했습니다 전환 코드가 누락되었습니다 (nav.top)

전환 : 모두 .4s;

부드럽게하기 위해 타이밍을 조정할 수 있습니다.

및 nav.fixed이

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

같은 CSS에서 고정 된 클래스와 탐색을 추가