javascript - 可以一个位置:fixed element with percentage width be calculated from body width?

Question

我有一个侧边栏，它从页面的中间位置开始，位置为:绝对。当您向下滚动并点击侧边栏的顶部时，一些 js 会运行使其位置:固定，因此当您进一步滚动时它会保持在 View 中。

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

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

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

Answer 1

您可以做的是将 min-width 设置为 nav 和 content。 将导航包装在您的绝对/固定元素中。 fixed 将始终以屏幕宽度/高度为引用，它意味着坚持这个区域 :) 如果设置最小宽度，则需要在比屏幕宽的固定区域向内容添加滚动条。

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; }