如何使用 flexbox 修复侧面 div 并使中心 div 可滚动？

Question

我有以下布局：-

我试图实现这一点，当我滚动时，一旦侧面的红色 div 到达顶部，它们就会固定在该位置，并且可以从那里滚动更多绿色 div（基本上我想将我的红色 div 保留在总是帧）。

我使用 flex 来对齐 3 个 div：-

以下是我的 HTML：-

<div class="content-container">
    <div class="left-navbar"></div>
    <div class="content-section"></div>
    <div class="right-navbar"></div>
</div>

以下是我的css：-

.left-navbar,.right-navbar{
    width: 15%; /*change */
    height:10em;
    margin: 20px 30px 0 20px;
    background-color:red;
    position:relative;
}

.content-container{
    display:flex;/*Add webkit flex properties */
}

.content-section{
    height: 100em;
    width: 60%;
    background-color: green;
}
.stick{
       position: fixed;
      top: 0px;
 }

以下是我的 JS：-

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('.left-navbar').offset().top;
    if (window_top > div_top) {
        $('.left-navbar').addClass('stick');
        /* $('#sticky-anchor').height($('#sticky').outerHeight()); */
    } else {
        $('.left-navbar').removeClass('stick');
        /*$('#sticky-anchor').height(0); */
    }
}


$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

所以现在当我到达顶部时，左边的 div 确实被固定了，但中心 div 向左移动，左边的红色 div 越过了它。

有人可以帮我解决这个问题吗？红色 div 到达顶部后应该被固定，并且中心 div 应该是可滚动的。

Answer 1

这是一个代码笔，展示了如何做到这一点：

http://codepen.io/thecox/pen/OXPZzr

当导航栏变为fixed 时，它们不再占用页面空间。所以content-section 折叠到left-navbar 留下的区域。我没有将 sticky 类添加到导航栏，而是将其添加到容器中，以便可以调整多个元素。我删除了 flex 行为，并使用了标准浮点数。

.content-container.sticky .left-navbar,
.content-container.sticky .right-navbar {
  position: fixed;
  top: 0;
}

.content-container.sticky .left-navbar {
  left: 0;
}

.content-container.sticky .right-navbar {
  right: 0;
}

最后，为了解决一些严重的跳跃问题，我让 JS 代码检查它是否滚动到初始容器之外（否则，它会计算一遍又一遍地位于 left-navbar 的顶部）。如果您有任何问题，请告诉我！