如何使用flexbox修复side div并使center 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确实被修复了但是中心divs向左移动并且左边的红色div越过它。

有人可以帮我这个吗？红色div应该在到达顶部时固定，中心div应该是可滚动的。

Answer 1

这是一个代码表，显示了如何做到这一点：

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

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

.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的顶部一遍又一遍）。如果您有任何问题，请告诉我们！