Question

我希望在我的页面上显示粘性侧边栏，当客户端位于文档顶部时相对定位，并在客户端滚动时修复。

我的问题在于Safari（它似乎适用于Chrome和Firefox）。

我让它使用了一组浮动div（侧边栏浮动）但是当我改为flexbox时，我发现快速滚动速度太快，粘性侧边栏无法跟上（无论是从相对位置脱离还是停留在页面上的固定位置。

还有其他人遇到类似的问题并找到了解决方法吗？如果有必要的话，我会回到花车上，但是由于我还在学习这些东西，因此深入了解为什么flexbox会导致问题。

谢谢！（代码/标记如下）

HTML：

<div class="order-form">
  <div class="left-column" id="left-column">
    <div class="sidebar" id="sidebar">
      <ul id="courses"></ul>
    </div>
  </div>
  <div class="menu" id="menu"><!-- content --></div>
  <div class="right-column"> <!-- content --></div>
</div>

JQuery的：

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

function stickers() {
  var sidebar = $(".sidebar");
  if ($(window).scrollTop() > 300) {
    sidebar.addClass("scrolling-sidebar");
  } else {
    sidebar.removeClass("scrolling-sidebar");
  }
}

旧的，没有问题的，CSS：

.order-form {
  padding: 0 300px 0 120px;
}
.sidebar {
  width: 150px;
  font-weight: lighter;
  text-transform: uppercase;
  display: block;
}

.sidebar.scrolling-sidebar {
  position: fixed;
  top: 75px;
  left: 5%
}

我当前的CSS文件（从Sass编译，看似由于我使用flexbox而出现问题）：

.order-form {
  margin: 50px 0;
  padding: 0 5%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  position: relative;
  }

.order-form .left-column {
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    flex-basis: 0;
    -webkit-order: 1;
    -moz-order: 1;
    order: 1; }
    @media (min-width: 992px) {
      .order-form .left-column {
        margin-right: 5%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-basis: 100px;
        -moz-flex-basis: 100px;
        flex-basis: 100px; 
      } 
  }

Safari中用于粘贴侧边栏的Flexbox性能

0 个答案: