javascript - bootstrap flex 全宽元素，内容对齐

Question

我有一个 div，它在滚动到时变为 fixed。我希望这个 div 在它处于 fixed 状态时全宽。我通过将 width: 100% 设置为相关的 div 来完成此操作。问题是我希望 div 的内容仍然与页面的内容对齐，而不是向左移动。我希望能够在不更改当前 html 标记的情况下执行此操作。

---

示例:滚动到fixed 状态时的全宽。

fiddle :https://jsfiddle.net/DTcHh/19335/

---

示例:如果我添加 padding left 以使内容向内移动，则此操作有效。问题是剩下的填充可以是任何数字——有没有办法可靠地解决这个问题？

fiddle :https://jsfiddle.net/DTcHh/19337/

---

CSS:

#myDiv.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

J查询:

$(window).scroll(function() {
  if (isScrolledIntoView($('#myDivWrapper'))) {
    if (!initSet) {
      initSet = true;
    }
    $("#myDiv").removeClass('fixed');
  } else if (initSet) {
    $("#myDiv").addClass('fixed');
  }
});

Answer 1

在 #myDiv 中添加一个额外的 .container div，并在修复发生时调整填充。

<div id="myDivWrapper">
    <div id="myDiv">
      <div class="container">
        <p>
          This should be fixed once it comes into view and then goes out of view.
        </p>
      </div>
    </div>
  </div>


#myDiv .container {
  padding: 0;
}

#myDiv.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

#myDiv.fixed .container {
padding: 0 15px;
}

这可能需要稍微整理一下，但我想您明白了。

JSfiddle