javascript - 使用 javascript 保持粘性使 div 超出父级

Question

我在左侧有一个菜单，我想始终保持粘性，我正在使用 javascript 来支持 IE11。
我遇到的问题是右 div 在粘性时向左移动并且不保持其位置，第二个问题是 .content当右 div 具有粘性时，div 宽度会增加。
对于 javascript 部分，我不知道如何使正确的 div 在到达页脚时停止。
编辑:
我设法解决了第二个问题，代码更新了，我也尝试添加一个right正确 div 的值，因此它保持在其初始垂直位置，但这不起作用，因为它会在屏幕调整大小时发生变化。
我该如何解决这个问题？
编辑 2:
对于 javascript 问题，我发现这篇文章帮助我解决了我的问题:
Make sticky/fixed element stop at footer

var sticky = document.getElementsByClassName("sticky-element")[0];
var stickyAnchor = sticky.parentNode;
var state = false;

function getAnchorOffset() {
    return stickyAnchor.getBoundingClientRect().top;
}

updateSticky = function (e) {
    if (!state && (getAnchorOffset() < 0)) {
      sticky.classList.add("is-sticky");
      sticky.parentElement.classList.add("has-sticky");
      state = true;
    } else if (state && (getAnchorOffset() >=0 )) {
      sticky.classList.remove("is-sticky");
      sticky.parentElement.classList.remove("has-sticky");
      state = false;
    }
}

window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);

updateSticky();

.main-wrapper {
    margin: 48px 48px 0 48px;
    max-width: 1366px;
}

.wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.wrapper.has-sticky .content{
    margin-right: calc(199px + 72px);
}

.content {
    flex: 0 1 1040px;
    width: calc(1040px - 72px);
    min-width: 1%;
    margin-right: 72px;
    height: 1200px;
    background-color: #e6e9f0;
}

.nav-menu {
    position: static;
    flex: 0 1 199px;
    width: 199px;
    min-width: 199px;
    color: white;
    height: 300px;
    background-color: #04246a;
    right: 10%;
}

footer {
  background-color: yellow;
  height: 300px;
  margin-top: 50px;
}

.is-sticky {
    top: 0;
    position: fixed;
}

<div class="main-wrapper">
  <div class="wrapper">
    <div class="content">
      Main content
    </div>
    <div class="nav-menu sticky-element">
      <nav>
        Side content
      </nav>
    </div>
  </div>
  <footer>
    Footer content
  </footer>
</div>

Answer 1

你在找这个吗？
您的代码的问题是，每当您设置 position您的右 div 到 fixed然后它查找其相对父级并跳转到父级内的左上角位置。在您的情况下，父 div 是 .wrapper ，这就是为什么它一直跳到左侧并与您的主要内容 div 重叠。
我为 .nav-menu 添加了一个父容器因此滚动时它仍将位于同一位置。有了这个，你的.nav-menu元素不会使用 .wrapper作为它的主要 parent 。这将创建一个平滑的滚动，而不会注意到位置的任何变化。
快乐编码!

var sticky = document.getElementsByClassName('sticky-element')[0];
var stickyAnchor = sticky.parentNode;
var state = false;

function getAnchorOffset() {
  return stickyAnchor.getBoundingClientRect().top;
}

updateSticky = function (e) {
  if (!state && getAnchorOffset() < 0) {
    sticky.classList.add('is-sticky');
    state = true;
  } else if (state && getAnchorOffset() >= 0) {
    sticky.classList.remove('is-sticky');
    state = false;
  }
};

window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);

updateSticky();

.main-wrapper {
  margin: 48px 48px 0 48px;
  max-width: 80%;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.content {
  flex: 0 1 80%;
  width: calc(80% - 24px);
  min-width: 1%;
  margin-right: 24px;
  height: 1200px;
  background-color: #e6e9f0;
}

.nav-container {
  flex-grow: 1;
  width: 20%;
  min-width: 200px;
  position: relative;
  display: block;
}

.nav-menu {
  color: white;
  width: 100%;
  min-width: inherit;
  height: 300px;
  background-color: #04246a;
}

.is-sticky {
  top: 0;
  position: fixed;
  width: calc(20% - 97px);
}

<div class="main-wrapper">
  <div class="wrapper">
    <div class="content">Main content</div>
    <div class="nav-container">
      <div class="nav-menu sticky-element">
        <nav>Side content</nav>
      </div>
    </div>
  </div>
</div>