0

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

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

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

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

4

1 回答 1

1

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

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; }
于 2013-06-06T15:30:28.790 回答