菜单保持固定

Question

我有一个小功能，在我点击菜单按钮后修复headerbar课程。

它可以工作，但当我再次点击按钮时，headerbar保持不变。

这是我的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');

});

此代码修复了headerbar类：

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

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

});

所以基本上我希望当我再次点击按钮时它会恢复正常。

Answer 1

试试这个：

的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;
}