jquery - body 上的 CSS 变换搞乱了固定的导航栏

Question

我在屏幕顶部有一个菜单栏，在标题之后。当我没有在 body 上设置转换时，我的代码工作正常，当你滚动到菜单栏下方时，它会变成一个导航栏，并作为屏幕顶部的固定栏出现。

但是，如果我像这样对 body 应用变换:

-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);

然后我的网站看起来更好，但是当滚动到菜单栏时，它并没有固定在屏幕顶部，它实际上移动到 html 页面的顶部而不是当前滚动区域的顶部。

知道为什么会这样吗？

#main-menu.isfixed {
    background: inherit;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

谢谢

Answer 1

作为解决方法，您可以减小所有内容的字体大小和尺寸，而不是缩放整个主体。请提供具有所需外观的 fiddle 。