CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
KP83
KP83

Reputation: 646

CSS animated hamburger icon and remove class on scroll?

I want to achieve 2 things when in responsive small screen size:

  1. Create a onclick CSS animated 'hamburger' icon into a cross icon (now it is just a fadeIn/Out effect).
  2. Remove class on scroll event so cross icon turns back in default hamburger icon.

I'm now using svg images for the nav-btn.

I know that i have to add a removeClass action on the scroll event, but tried some different things, but my JS-skills aren't that good.

Hope there is someone that can help or guide me threw this either the one or the other.

Here the FIDDLE

Screenshots:

enter image description here enter image description here Cross need to changes back in hamburger icon on scroll:

enter image description here

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

Upvotes: 0

Views: 626

Answers (1)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

Add $('.nav-btn').removeClass('open');

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

Upvotes: 1

Related Questions