CSS动画汉堡包图标和删除滚动类？

Question

我想回应小屏幕尺寸时实现两件事情：

1. 创建动画“汉堡包”图标成十字图标的onclick CSS（现在它只是一个淡入/淡出效果）。
2. 在滚动事件中删除类，所以十字图标在默认的汉堡包图标中返回。

我现在正在为nav-btn使用svg图像。

我知道我必须在滚动事件上添加一个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

添加$（ 'NAV-BTN。 '）removeClass（' 开'）;

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