JQuery .scroll и scrollTop не работает в IE

Question

codepen link

Поведение события прокрутки не работает в IE правильно. Когда я прокручиваю с колесиком мыши вниз, заголовок должен быть закреплен в верхней части с классом nav-down но присоединять класс nav-up первый затем nav down

Другого браузер работает отлично. Может кто-нибудь, пожалуйста, помогите мне. :)

$(function(){ 
    var lastScrollTop = 0; 
    $(window).scroll(function(){ 
    if ($(window).scrollTop() > 600) { 
     console.log('WORKING'); 
      //scroll 
      var st = $(this).scrollTop(); 
      console.log('lastScrollTop:' +lastScrollTop+ 'st: '+st+' position:'+ (lastScrollTop - st)); 
      if(lastScrollTop - st < 0){ 
      console.log('down'); 
      $(".top-header").removeClass("nav-down").addClass("nav-up"); 
      }else{ 
      console.log('up'); 
      $(".top-header").removeClass("nav-up").addClass("nav-down"); 
      } 
      lastScrollTop = st;  
    } else { 
     $(".top-header").removeClass("nav-down").addClass("nav-up"); 
    } 
    }); 
}); 

HTML

<header class="top-header nav-up"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"><a class="brand-name">logo</a></div> 
     <div class="col-md-6 text-right"> 
     <div class="btn btn-header">Download</div> 
     </div> 
    </div> 
    </div> 
</header> 
<section class="bring-scroll"> 
    <div class="container"> 
    <div class="row text-center"> 
     <h1>keep scrolling to see the effect of navigation scrolling</h1> 
    </div> 
    </div> 
</section> 

CSS

body { 
    height: 1600px; 
} 
.brand-name { 
    width: 200px; 
    display: inline-block; 
    font-size: 25px; 
    color: #fff; 
} 
.brand-name img { 
    width: 100%; 
} 
.top-header { 
    background: #374965; 
    height: 60px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 33; 
    padding: 9px 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
} 
.top-header.nav-up { 
    top: -60px; 
} 
.top-header.nav-down { 
    top: 0px; 
} 
.btn-header { 
    background: #ec4a3d; 
    color: #ffffff; 
} 
.bring-scroll { 
    color: white; 
    height: 600px; 
    display: block; 
    background: #ec4a3d; 
    margin-bottom: 5000px; 
} 

Answer 1

Какую версию JQuery вы используете? Версия 2.X и 3.X поддерживает только IE 9+ и не поддерживает более старые версии браузера, такие как IE 6-8, и это может быть вашим делом.

Это указано на http://jquery.com/browser-support/

Если вам необходимо поддерживать старые браузеры, такие как Internet Explorer 6-8, Opera 12.1x или Safari 5.1 +, использовать JQuery 1.12.