Question

这是演示问题的小提琴：

javascript添加＆＃34;位置：固定＆＃34;导航内容。一切都按照我想要的方式工作，导航内容在向下滚动页面时保持不变。现在，如果你去＆＃34; position：fixed＆＃34;在＆＃34;＃nav-content＆＃34;在CSS中，删除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);
    }
});

VS

#nav-content {
    position: fixed;
}

起初我认为这可能是听众导致它工作的原因（但为什么？），但在实时浏览器中打开它并添加＆＃34;位置：固定＆＃34;通过检查员，它的工作原理应该如何。这就是问题，四种方法中有两种给出了相同的，期望的结果，但另外两种方法给出了相同的，不希望的结果。

Answer 1

虽然我不是100％确切的为什么我认为原因是因为通过声明它固定具有以下效果。

固定
不要为元素留出空间。相反，将它定位在指定的位置

所以这意味着当首次呈现页面时，允许100％的内容占据整个屏幕。导航（虽然不是固定的那个，这是令人困惑的位）在屏幕上但被内容隐藏在100％。有趣的是，如果你使用chrome来禁用导航出现的固定属性，那么因为它现在在屏幕上重新应用固定的位置不会隐藏它，这就是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和固定属性的工作方式有些奇怪，可能。

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

1 个答案: