position:fixed元素是否可以从正文宽度计算出百分比宽度？

Question

我有一个侧边栏，它从页面的一半位置开始:绝对。当你向下滚动并点击侧边栏的顶部时，一些js会将其设置为position: hit，这样当你继续向前滚动时，它就会停留在视图中。

问题是，我希望页面的宽度是流畅的，所以我设置了侧栏宽度:25%，其余内容宽度:75%。页面的正文宽度:100%，边上有一些填充。

直到侧边栏获得一个固定的宽度，它突然伸展开来，现在25%的宽度似乎是从屏幕宽度而不是主体宽度计算出来的。这是有道理的，但这并不是理想的结果--我希望滚动时宽度保持不变。

我能做什么?css或js (jquery)解决方案。谢谢

Answer 1

您可以做的是将min-width设置为nav和content。在你的绝对/固定元素中包装nav。固定将总是以屏幕宽度/高度作为参考，它意味着停留在这个区域:)如果你设置了一个最小宽度，你将需要在比屏幕更宽的固定区域中添加滚动。

http://jsfiddle.net/GCyrillus/GfSM6/

   nav, section {
        width:80%;
        margin:auto; } html, body {
        height:100%;
        margin:0; } section {
        min-height:100%;
        background:#333;
        color:#def;
        padding-top:4em;
        box-sizing:border-box; }
    #posabsfxd {
        position:fixed;
        left:0;
        right:0;
        top:2em;
        text-align:center; } nav {
        background:tomato; } a {
        color:gold; }