CSS动画汉堡包图标并删除滚动课程？

Question

我希望在响应小的屏幕尺寸时实现2件事：

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（'open'）;

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