jquery - 需要帮助修复另一个带有滚动的 div 中的顶部栏

Question

各位!我正在尝试创建一个模板，如下图所示。

我将向您解释它的作用:

左右菜单将在 150 和 50 像素之间切换(我已经使用 jQuery 制作了这部分脚本)。当切换脚本从 150 运行到 50 时，页面内容将展开(也已经这样做了)。

侧面菜单在图片中写有“固定位置”，但我不再需要它，因为我将使用 overflow-y:在内容上滚动而不是页面滚动。

我不知道该怎么做:我真的无法在内容扩展的同时固定和扩展顶部栏。

图片

这是我到目前为止所做的:

Fiddle

CSS:

    *{
    margin: 0px;
    padding: 0px;
}
body, html{
    height: 100%;
}

#container {
    display: table;
    width: 100%;
    height: 100%;
}

#left, #middle, #right {
    display: table-cell;
    height: 100px;
}

#left, #right {
    width: 150px;
    background: #1f1f1f;
    height: 100%;
    color: white;
}

#middle {
    background: white;
}

Answer 1

您可以为顶部栏使用固定位置:

HTML

<div id="top">top bar</div>

CSS

#top {position:fixed; background:lightblue; top:0; left:150px; right:150px; }

jQuery

var top = $('#top');
$('#middle').css('padding-top', top.outerHeight());

$('#left').click(function(){
   width = $(this).width();
    if(width == 150){
        $(this).css('width', 50);
        top.css('left', 50);
    } else {
        $(this).css('width', 150);
        top.css('left', 150);
    }
});

$('#right').click(function(){
   width = $(this).width();
    if(width == 150){
        $(this).css('width', 50);
        top.css('right', 50);
    } else {
        $(this).css('width', 150);
        top.css('right', 150);
    }
});

Example