Javascript 侧导航栏在切换时更改页面内容的对齐方式

作为我正在开发的网站的一部分，我需要实现一个侧导航栏（位于右侧），当切换以显示导航栏内容时，它将页面内容推向左侧

问题是，动画中有一个小故障。当再次单击切换以关闭导航栏时，它会向右推动网站的整个内容。内容需要返回到单击切换之前的位置

这是我的代码：

HTML

JS

这会在滚动时向导航栏添加白色背景

$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
            header.addClass("scrolled");
        } else {
            header.removeClass("scrolled");
        }
    });

});

这将生成有关被推到左侧的内容的动画

$('#menu').css("right","-300px");
    $('.menu_icon').on('click',function(){
        if($('.menu_icon').hasClass('open')){
            $(this).removeClass('open');
            $(this).animate({
                "right":"20px",
                "background-position":"0px"
            });
            $('#menu').animate({"right":"-300px"});
            $('body').css("position","absolute");
            $('body').animate({
                "right":"0px",
                "z-index":"999"
            });
        }
        else{
            $(this).addClass('open');
            $(this).animate({
                "right":"310px",
                "background-position":"-40px"
            });
            $('#menu').animate({"right":"0px"});
            $('body').css("position","absolute");
            $('body').animate({
                "right":"300px",
                "z-index":"999"
            });

        }
    });

我所尝试的：

我对JS代码中的结尾动画做了一些修改，但我认为这不是实现这一点的正确方法。我将正确的间距改为300px，而不是0px

 $('#menu').animate({"right":"-300px"});
      $('body').css("position","absolute");
      $('body').animate({
          "right":"300px",
          "z-index":"999"
      });

这仍然无法修复导航栏对齐

---

有什么办法可以解决这个问题吗？我也把代码贴在了codepan上

除非您需要进行CSS不允许的计算，否则您应该使用CSS设置所有内容的动画。它在CPU上更容易实现，而且实现起来也容易得多

body {
  transition: margin 0.5s ease;
}

#menu {
  padding-top: 80px;
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #000;
  transition: right 0.5s ease;
}

#menu.open {
  right: 0;
}

---

这样，您只需将

open

类添加到菜单中，CSS就会处理其余的部分。您需要调整布局以适应较小的尺寸，但这应该很容易。

这是使用CSS的一个重要方面，我们将对此进行研究。只是尝试了一下，但没有解决问题。菜单现在一点也不弹出。删除了所有的js，取而代之的是在单击菜单图标时切换open类。菜单一点也没变。我在这里做错什么了吗？建议？

 $('#menu').animate({"right":"-300px"});
      $('body').css("position","absolute");
      $('body').animate({
          "right":"300px",
          "z-index":"999"
      });

body {
  transition: margin 0.5s ease;
}

#menu {
  padding-top: 80px;
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #000;
  transition: right 0.5s ease;
}

#menu.open {
  right: 0;
}

$(function() {
  var header = $(".navbar");

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      header.addClass("scrolled");
    } else {
      header.removeClass("scrolled");
    }
  });
});

$('#menu').css("right","-300px");
$('.menu_icon').on('click',function(){
  if($('.menu_icon').hasClass('open')){
    $(this).removeClass('open');
    $(this).animate({
      "right":"20px",
      "background-position":"0px"
    });
    $('#menu').animate({"right":"-300px"});
    $('body').css("margin-right","");
  }
  else{
    $(this).addClass('open');
    $(this).animate({
      "right":"310px",
      "background-position":"-40px"
    });
    $('#menu').animate({"right":"0px"});
    $('body').css("margin-right", "300px");
  }
});