如何修复侧div和使中心div滚动使用flexbox？

Question

我有以下布局：-

我试图实现这一点，当我滚动时，一旦侧红色div到达顶部，它们就固定在那个位置，从那里绿色div可以滚动更多（基本上，我想让我的红色div总是在框架中）。

我使用flex对齐了3个分区：-

以下是我的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应该是可滚动的。

Answer 1

这里有一个代码显示了如何做到这一点：

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

当导航栏变得固定时，它们不再占用页面上的空间。因此，内容部分折叠到左侧导航栏留下的区域中。我没有将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代码检查它是否滚动到初始容器之外（否则，它会反复计算位于左侧导航栏的顶部）。如果你有任何问题，请告诉我！