CSS анимированный значок гамбургера и удалить класс на свитке?

Question

Я хочу добиться 2 вещи, когда в отзывчивом небольшом размере экрана:

1. Создать OnClick CSS анимированного значка «гамбургер» в крестик (теперь это просто/Out эффект FadeIn).
2. Удалить класс в событии прокрутки, чтобы перекрестный значок возвращался в значок гамбургера по умолчанию.

Теперь я использую svg-изображения для nav-btn.

Я знаю, что мне нужно добавить действие removeClass в событие прокрутки, но попробовал разные вещи, но мои навыки JS не так уж хороши.

Надеюсь, что кто-то может помочь или направить меня бросил это либо тот, либо другой.

Here the FIDDLE

Скриншоты:

Крест необходимость изменения обратно в значок гамбургер на свитке:

Html:

<header> 
<nav> 
    <div class="col-nav"> 
     <a href="#" class="nav-btn"></a> 
     <a href="#" class="home">Logo</a> 
    </div> 
    <ul> 
     <li class="col-nav"><a href="#">Item1</a></li> 
     <li class="col-nav"><a href="#">Item2</a></li> 
     <li class="col-nav"><a href="#">Item3</a></li> 
    </ul> 
</nav> 
</header> 

Javascript:

$(function() { 
$('.nav-btn').click(function() { 
    $('nav ul').fadeToggle(300); 
    $(this).toggleClass("open"); 
}) 
}); 

$(window).scroll(function() { 
if ($(this).scrollTop() > 50) { 
    $('nav ul').hide(); } 
}); 

Answer 1

Добавить $ ('нав-BTN.) RemoveClass ("открытый');.

$(window).scroll(function() { 
    if ($(this).scrollTop() > 50) { 
     $('nav ul').hide(); 
     $('.nav-btn').removeClass('open'); 
    } 
});