Question

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

实际上，这个div将包含我的导航菜单，这对我来说非常复杂，需要使用flexbox。我希望导航菜单向上滚动，然后粘到顶部。经典行为......

我知道flexbox和固定位置不会很好地混淆，但我仍然想知道是否有办法让包含flexbox的div变粘，而不会破坏其中的flex布局。

假设我的div像本网站的灰色栏一样移动： look at the grey bar scrolling up 让我们说这个灰色条必须包含flexbox！

我的第一次测试是使用here提供的jQuery基本解决方案完成的。破坏弹性布局。跟随它的2013插件（页面上的链接）也无济于事。

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

对于任何线索或替代解决方案来说都很重要！

private

Foo

public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);

            var hubConfiguration = new HubConfiguration();
            hubConfiguration.EnableDetailedErrors = true;
            hubConfiguration.EnableJavaScriptProxies = false;
            app.MapSignalR("/signalr", hubConfiguration);
        }
    }

Answer 1

当flexbox容器具有固定定位的父级时，没有不兼容性。

您的代码唯一的问题是：

position: fixed从流中删除元素，因此后续元素会跳起来占用其空间。您可以通过在前一个元素上添加下边距来抵消这种情况。
当固定定位元素的所有width，left和right设置为auto时，其宽度将是内容所需的最小值，而不是包含块的宽度。

所以你可以使用：

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;
}

＆＃13;

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();
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用JS进行粘贴定位只是一个黑客攻击。正确而干净的方式是：

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

可悲的是并非所有浏览器都支持它。

Answer 3

感谢Oriol的回答，我接受了，我开始了解如何处理位置：使用我的flexboxes修复。我会尝试尽快发布一个更清晰的片段，但就目前而言，我可以向任何愿意了解正在发生的事情的人发出指示：

观看this video，其中介绍了有关粘性元素的基础知识。
如果你很懒，我建议你看一下this plugin; - ）。
对于在粘性元素中使用flexbox，请仔细阅读Oriol的答案

干杯，享受flexbox，享受jQuery，享受生活！

如何使flexbox布局的一部分变得粘稠？

3 个答案: