javascript - 使用 JS CSS 设置位置会导致与使用纯 CSS 进行相同设置不同的结果

Question

这是一个演示问题的 fiddle :

http://jsfiddle.net/6e1vg58L/

javascript 将“position:fixed”添加到导航内容。一切都按照我想要的方式进行，导航内容在向下滚动页面时保持不变。现在，如果您将“position: fixed”放在 CSS 的“#nav-content”下，并删除 JS，结果应该相同，对吗？

出于某种原因，在 CSS 或 HTML 中设置位置会导致整个单元格消失，而使用 Javascript 或任何浏览器检查器设置它会给出所需的输出？

$(document).on("scroll", function(){
    if($(window).scrollTop() > 0)
    {
        $("#nav-content").css("position","fixed");
    }
    else
    {
        $("#nav-content").css("position","relative");
        $("#nav-content").css("top",0);
    }
});

对比

#nav-content {
    position: fixed;
}

起初我认为这可能是监听器导致它工作的原因(但为什么？)，但在实时浏览器中打开它并通过检查器添加“位置:固定”后，它的工作方式完全正确应该。这就是问题所在，四种方法中有两种给出了相同的、期望的结果，但另外两种给出了相同的、不期望的结果。

Answer 1

虽然我不是 100% 知道确切的原因，但我认为原因是因为通过声明它已修复具有以下效果。

fixed
Do not leave space for the element. Instead, position it at a specified position

所以这意味着当页面首次呈现时，允许 100% 的内容占据整个屏幕。导航(虽然不是固定的，这是令人困惑的一点)在屏幕上，但被 100% 的内容隐藏。有趣的是，如果您使用 chrome 禁用 fixed 属性，导航会出现，然后因为它现在在屏幕上重新应用固定位置不会隐藏它，这就是 JS 路由行为不同的原因。

修复的更改可以定义彼此相对的初始宽度。

#content {
    position: relative;
    background-color: #eee;
    width: 70%;
    max-width: 1300px;
    min-width: 450px;
    height: auto;
}

导航也是一样

#navigation {
    width: 30%;
    background-color: #000;
    height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/vemtyyox/

将导航保持在 300px 的另一种方法是使用 calc 来定义内容的宽度

#content {
    position: relative;
    background-color: #eee;
    width: calc(100% - 300px);
    max-width: 1300px;
    min-width: 450px;
    height: auto;
}

#navigation {
    width: 300px;
    background-color: #000;
    height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/9db77jvp/

仔细观察，我认为 display:table-cell 和固定属性的工作方式可能有些奇怪。