Menü bleibt behoben

Question

Ich habe eine kleine Funktion, die meine headerbar Klasse repariert, nachdem ich auf den Menü-Button geklickt habe.

Es funktioniert, aber wenn ich auf die Schaltfläche erneut klicke, bleibt die headerbar fixiert.

Hier ist mein javascript:

// menu animation 
$(window).load(function() { 

    $('.menuBtn').click(function(e) { 
     e.preventDefault(); 
     (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active'); 
     $('nav').slideToggle(); 
    }); 

}); 



$('.menuBtn').click(function() { 

    $('nav').css('position', 'fixed'); 
    $('.headerBarm').css('position', 'fixed'); 

}); 

Dieser Code macht die headerbar Klasse festgelegt:

$('.menuBtn').click(function() { 

    $('nav').css('position', 'fixed'); 
    $('.headerBarm').css('position', 'fixed'); 

}); 

Also im Grunde möchte ich es wieder normal ändern, wenn ich wieder auf die Schaltfläche klicken.

Answer 1

Versuchen Sie folgendes:

JavaScript

$(function() { 
    $('.menuBtn').click(function (e) { 
     e.preventDefault(); 
     $(this).toggleClass('is-active').toggleClass('fixed-position'); 
     $('.headerBarm').toggleClass('fixed-position'); 
     $('nav').slideToggle(); 
    }); 
}); 

CSS

.fixed-position { 
    position: fixed; 
}