具有重新调整大小约束的固定DIV元素

Question

我的网站有以下基本布局。基本上，我在固定位置有NAV div和SIDEBAR div。这是因为当用户在我的页面上向下滚动时，只会移动MIDDLE COLUMN div。

我遇到的问题是当窗口水平缩小时，SIDEBAR会向左移动并最终与我的MIDDLE COLUMN重叠。

我将body设置为min-width，但只有position:absolute而不是position:fixed才会影响SIDEBAR

有没有办法保持相同的滚动方法，但是在某个像素约束之后让SIDEBAR div停止向左移动？

谢谢！

编辑标记：

div.MASTER {
    position: inherit;
    width:100%;
    height:auto;
}

div.NAV {
    position:fixed;
    top:0;
    left:0;
    width:200px;
}

div.CONTENT {
    float: left;
    position: relative;
    width:100%;
}

div.MIDDLECOLUMN {
    float:left;
    width:100%;
    height:100%;
    text-align:center;
}

div.SIDEBAR {
    position:fixed;
    top: 0;
    right: 0;
    width:200px;
}

Answer 1

啊，我看到了这个问题。您需要在主容器上指定最小宽度。将min-width设置为元素在其中断之前的宽度。

将等于导航栏宽度的margin-left添加到内容div。

Answer 2

您可以在jquery中使用滚动功能：

$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional

$(window).scroll(function()
{   
 if ($(window).scrollLeft()>$left)   
        {
         $('#yourdiv').addClass('floater');
         $('#yourdiv').removeClass('floated')
        }
        else
        {
         $('#yourdiv').removeClass('floater');
         $('#yourdiv').addClass('floated')

         }
});
});

其中浮点类的位置是绝对的，浮动位置是固定的。

编辑1：

也许您可以使用所有百分比宽度，即使在NAV栏中也是如此：

.nav{width:20%; position:fixed;} 

.master{width:60%; position:absolute;margin-left:21%; }