CSS 动画汉堡包图标并删除滚动条上的 class？

Question

我想在响应式小屏幕尺寸下实现两件事：

创建一个onclick CSS动画'hamburger'图标变成十字图标（现在只是一个fadeIn/Out效果）
删除 class 滚动事件，使十字图标返回默认的汉堡包图标。

我现在为导航按钮使用 svg 图像。

我知道我必须在滚动事件上添加一个 removeClass 操作，但尝试了一些不同的东西，但我的 JS 技能不是很好。

希望有人可以帮助或指导我把这个扔掉。

Here the FIDDLE

截图：

Cross 需要改回卷轴上的汉堡包图标：

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

CSS 动画汉堡包图标并删除滚动条上的 class？

CSS animated hamburger icon and remove class on scroll?

javascript

html

css

css-transitions