jquery - 如何使 flexbox 布局的一部分变得粘性？

Question

我已经决定为我的元素切换到 flexbox 布局，这是我的问题:我希望在向下滚动时有一个 div 粘在页面顶部，这个 div 包含 flexbox 元素。

实际上，这个 div 将包含我的导航菜单，它很复杂，我需要 flexboxes。我希望导航菜单向上滚动，然后保持在顶部。一个经典的行为...

我知道 flexbox 和 fixed position 不能很好地混合，但我仍然想知道是否有一种方法可以使包含 flexboxes 的 div 具有粘性，而不会破坏其中的 flex 布局。

假设我的 div 像这个网站中的灰色条一样移动: look at the grey bar scrolling up 假设这个灰色条必须包含 flexboxes !

我的第一个测试是使用提供的 jQuery 基本解决方案进行的 here . 破坏 flex 布局。 紧随其后的 2013 插件(页面上的链接)也无济于事。

知道如何在不放弃 flex 内容的情况下获得如此粘性的行为吗？

非常感谢任何线索或替代解决方案!

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

当 flexbox 容器有一个固定定位的父容器时，没有不兼容。

您的代码唯一的问题是:

• position: fixed 从流中移除该元素，因此后面的元素会跳起来占据它的空间。您可以通过为前一个元素添加底部边距来抵消这种情况。
• 当固定定位元素的width、left和right都设置为auto时，那么它的宽度将是内容所需的最小宽度，而不是其包含 block 的宽度。

所以你可以使用:

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>