How to make part of a flexbox layout become sticky?

Question

I have decided to switch to a flexbox layout for my project, and here is my problem : I would like to have a div becoming sticky on top of the page when scrolling down, with this div containing flexbox elements.

Practically, this div will contain my nav menu, which is complicated enough for me to need flexboxes. I want that nav menu to scroll up, then stick to the top. A classic behavior...

I know flexbox and fixed position don't mix up very well, yet I'm still wondering if there is a way to make a div containing flexboxes sticky, without destroying the flex layout inside it.

Let's say my div moves like the grey bar in this website : look at the grey bar scrolling up And let's say this grey bar MUST contain flexboxes !

My first tests were made using the jQuery basic solution provided here. Destroys the flex layout. The 2013 plugin following it (link on the page) doesn't help either.

Any idea how I could get such a sticky behavior without giving up on my flex content ?

Thx a lot for any clue or alternative solution !

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#wrapper').addClass('stick');
  } else {
    $('#wrapper').removeClass('stick');
  }
}

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

/* layout CSS */

.flexBox {
  display: flex;
  height: 200px;  
}

.left_side {
  width: 200px;
 }

.right_side {
  flex: 1;
 }

#left1 {background-color:red;}
#right1 {background-color:blue;}
#left2 {background-color:green;}
#right2 {background-color:black;}
#contents {
  background-color:orange;
  height: 1000px;
}

/* Sticky CSS */

#wrapper.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="flexbox1" class="flexBox">
  <div id="left1" class="left_side"></div>
  <div id="right1" class="right_side"></div>
</div>

<div id="sticky-anchor"></div>

<div id="wrapper">
  <div id="flexbox2" class="flexBox">
    <div id="left2" class="left_side"></div>
    <div id="right2" class="right_side"></div>
  </div>
 </div>

<div id="contents">
  Lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. An nec discere accusam recusabo, usu iudico habemus ponderum ex. Cu vis vitae libris temporibus, pri simul nominavi et. No omittantur disputationi vis, pro ei putent noluisse eleifend. Utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/>

Sit et error alterum. Euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. Pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. Eos ea labores adolescens consetetur. Ex ius inermis percipit theophrastus, sed id agam expetendis.<br/>

Ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. Ei alii probo timeam vix, vim ad erat magna. Ne qui posse dicta labores. Sea ut eius percipit. Mel et nullam praesent forensibus. Purto comprehensam qui ex, facer mandamus principes at vix.<br/>

Alii doctus audire qui at. Dicunt sapientem et mei, per at falli fierent. Et case singulis cum, et natum expetendis sea. Deleniti deseruisse vel ne. Pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. Eam an qualisque quaerendum, sale homero perpetua an eam. Ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/>

Ut aperiri feugiat elaboraret sed, an nec nihil choro tibique. Tale regione accumsan ex sea. Mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. In clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. Tation aliquid eu est, dolorem molestie assentior ea vis. Minimum percipit at mea, vel mollis ornatus imperdiet eu. Te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae.
</div>

Answer 1

Thanks to Oriol's answer I accepted, I came to understand how to work around position:fixed with my flexboxes. I'll try to post a cleaner snippet asap, but for now, I can give directions to anyone willing to understand what's happening :

1. Watch this video which explains the basics about sticky elements.
2. I suggest you take a look at this plugin if you're lazy ;-).
3. For flexbox use inside your sticky elements, read Oriol's answer carefully

Cheers, enjoy flexbox, enjoy jQuery, enjoy your life !

Answer 2

There is no incompatibility when a flexbox container has a fixed positioned parent.

The only problems with your code are:

• position: fixed removes the element from the flow, so following elements jump up to take its space. You can counteract this by adding a bottom margin to the previous element.
• When a fixed positioned element has all width, left and right set to auto, then its width will be the minimum required by the content, instead of the width of its containing block.

So you can use:

var cond = $(window).scrollTop() > $('#sticky-anchor').offset().top;
$('#wrapper').toggleClass('stick', cond);
$('#sticky-anchor').css({
  marginBottom: cond ? $('#wrapper').outerHeight() + 'px' : 0
});

#wrapper.stick {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

function sticky_relocate() {
  var cond = $(window).scrollTop() > $('#sticky-anchor').offset().top;
  $('#wrapper').toggleClass('stick', cond);
  $('#sticky-anchor').css({
    marginBottom: cond ? $('#wrapper').outerHeight() + 'px' : 0
  });
}
$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

/* layout CSS */
body {
  margin: 0;
}
.flexBox {
  display: flex;
  height: 200px;  
}
.left_side {
  width: 200px;
}
.right_side {
  flex: 1;
}
#left1 {background-color:red;}
#right1 {background-color:blue;}
#left2 {background-color:green;}
#right2 {background-color:black;}
#contents {
  background-color:orange;
  height: 1000px;
}

/* Sticky CSS */
#wrapper.stick {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox1" class="flexBox">
  <div id="left1" class="left_side"></div>
  <div id="right1" class="right_side"></div>
</div>
<div id="sticky-anchor"></div>
<div id="wrapper">
  <div id="flexbox2" class="flexBox">
    <div id="left2" class="left_side"></div>
    <div id="right2" class="right_side"></div>
  </div>
</div>
<div id="contents">
  Lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. An nec discere accusam recusabo, usu iudico habemus ponderum ex. Cu vis vitae libris temporibus, pri simul nominavi et. No omittantur disputationi vis, pro ei putent noluisse eleifend. Utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/>

  Sit et error alterum. Euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. Pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. Eos ea labores adolescens consetetur. Ex ius inermis percipit theophrastus, sed id agam expetendis.<br/>

  Ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. Ei alii probo timeam vix, vim ad erat magna. Ne qui posse dicta labores. Sea ut eius percipit. Mel et nullam praesent forensibus. Purto comprehensam qui ex, facer mandamus principes at vix.<br/>

  Alii doctus audire qui at. Dicunt sapientem et mei, per at falli fierent. Et case singulis cum, et natum expetendis sea. Deleniti deseruisse vel ne. Pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. Eam an qualisque quaerendum, sale homero perpetua an eam. Ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/>

  Ut aperiri feugiat elaboraret sed, an nec nihil choro tibique. Tale regione accumsan ex sea. Mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. In clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. Tation aliquid eu est, dolorem molestie assentior ea vis. Minimum percipit at mea, vel mollis ornatus imperdiet eu. Te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae.
</div>

Answer 3

Sticky positioning with JS is just a hack. The proper and clean way is:

#wrapper {
  position: sticky;
  top: 0;
}

/* layout CSS */

.flexBox {
  display: flex;
  height: 200px;  
}

.left_side {
  width: 200px;
 }

.right_side {
  flex: 1;
 }

#left1 {background-color:red;}
#right1 {background-color:blue;}
#left2 {background-color:green;}
#right2 {background-color:black;}
#contents {
  background-color:orange;
  height: 1000px;
}

/* Sticky CSS */

#wrapper {
  position: sticky;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="flexbox1" class="flexBox">
  <div id="left1" class="left_side"></div>
  <div id="right1" class="right_side"></div>
</div>

<div id="sticky-anchor"></div>

<div id="wrapper">
  <div id="flexbox2" class="flexBox">
    <div id="left2" class="left_side"></div>
    <div id="right2" class="right_side"></div>
  </div>
 </div>

<div id="contents">
  Lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. An nec discere accusam recusabo, usu iudico habemus ponderum ex. Cu vis vitae libris temporibus, pri simul nominavi et. No omittantur disputationi vis, pro ei putent noluisse eleifend. Utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/>

Sit et error alterum. Euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. Pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. Eos ea labores adolescens consetetur. Ex ius inermis percipit theophrastus, sed id agam expetendis.<br/>

Ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. Ei alii probo timeam vix, vim ad erat magna. Ne qui posse dicta labores. Sea ut eius percipit. Mel et nullam praesent forensibus. Purto comprehensam qui ex, facer mandamus principes at vix.<br/>

Alii doctus audire qui at. Dicunt sapientem et mei, per at falli fierent. Et case singulis cum, et natum expetendis sea. Deleniti deseruisse vel ne. Pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. Eam an qualisque quaerendum, sale homero perpetua an eam. Ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/>

Ut aperiri feugiat elaboraret sed, an nec nihil choro tibique. Tale regione accumsan ex sea. Mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. In clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. Tation aliquid eu est, dolorem molestie assentior ea vis. Minimum percipit at mea, vel mollis ornatus imperdiet eu. Te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae.
</div>

Sadly not all browsers support it yet.