Html 如何使用transform:translate3d而不中断位置：固定？

我在另一个网站上发现了一个布局，它有一个固定的标题和两个推送菜单，两边各一个。在chrome中使用inspect元素后，我可以看到该网站使用了

transform:translate3d

来允许其菜单左右移动，但我无法确定开发人员是如何使网站的

主体

与之一起移动的。快速查看一下，我发现

transform:translate3d

似乎没有在

body

元素上使用，但我很确定，为了移动主要内容，代码的这一部分正在发生一些事情，因为单击菜单按钮时，它会被赋予一个额外的类

该网站是：

我在jsfiddle中提出了一个布局，其中按钮打开的菜单与上面的站点完全相同，但是站点的

主体保持静止

示例1:

我还使用
body
元素上的
transform:translate3d
提出了第二个jsidle，但这一个在菜单打开时打破了标题和推送菜单上的固定位置

示例2:

下面是示例1中的代码：，我认为它最接近我在上面提供的网站上使用的代码。有人知道他们是如何在不破坏某些元素的固定位置的情况下，让身体随菜单移动的吗

HTML

<header class="header">
    <span id="button-one"></span>
    <span id="button-two"></span>
    <div class="push-menu-one"></div>
    <div class="push-menu-two"></div>
    <div class="overlay"></div>
</header>

<div class="content">

</div>

<footer class="footer">
Footer
</footer>

jQuery

jQuery(document).ready(function($) {

    $('#button-one').click(function() {
        $('body, .overlay, .push-menu-one').toggleClass('open-left');

    });

    $('#button-two').click(function() {
        $('body, .overlay, .push-menu-two').toggleClass('open-right');

    });

    $('.overlay').click(function() {
        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');

        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');

    });

});

他们不是在翻译
正文
，而是在翻译
正文。转换容器
感谢您的评论。好的，作为一个
身体的孩子
——你能为我详细解释一下吗？我是一个新手，我只习惯于使用
toggleClass
移动东西，我看不到他们做过这件事的任何证据。看起来他们使用了不同于
transform:translate3d
的方法，这可能解释了他们是如何在不破坏固定位置的情况下完成的，就像我在上面的第二个示例中所做的那样？如果您使用
类检查元素。使用浏览器的开发工具在
main#home
内部使用transform container
，您将看到应用于它的样式。您还可以看到，当菜单打开时，他们正在切换主体上的类
.menu open
，这将向
.transform container
节点应用其他样式（变换

样式）。如果您不熟悉DevTools（在Chrome中按F12）并检查代码，然后，我强烈建议您熟悉它，因为它是了解浏览器如何呈现内容的最强大工具之一。据我所知，他们也在使用

.transform container

上的

translate3d

。您不能。避免

转换

他们不是在翻译

正文

，而是在翻译

正文。转换容器

感谢您的评论。好的，作为一个

身体的孩子

——你能为我详细解释一下吗？我是一个新手，我只习惯于使用

toggleClass

移动东西，我看不到他们做过这件事的任何证据。看起来他们使用了不同于

transform:translate3d

的方法，这可能解释了他们是如何在不破坏固定位置的情况下完成的，就像我在上面的第二个示例中所做的那样？如果您使用

类检查元素。使用浏览器的开发工具在
main#home
内部使用transform container

，您将看到应用于它的样式。您还可以看到，当菜单打开时，他们正在切换主体上的类

.menu open

，这将向

.transform container

节点应用其他样式（变换样式）。如果您不熟悉DevTools（在Chrome中按F12）并检查代码，然后，我强烈建议您熟悉它，因为它是了解浏览器如何呈现内容的最强大工具之一。据我所知，他们也在使用

.transform container

上的

translate3d

。您不能。避免

transform

jQuery(document).ready(function($) {

    $('#button-one').click(function() {
        $('body, .overlay, .push-menu-one').toggleClass('open-left');

    });

    $('#button-two').click(function() {
        $('body, .overlay, .push-menu-two').toggleClass('open-right');

    });

    $('.overlay').click(function() {
        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');

        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');

    });

});