位置粘性未使用 flexbox 完全滚动-解网

问：

.header,
.footer {
  text-align: center;
  height: 300px;
  background: white;
}

.container {
  display: flex;
  width: 600px;
  margin: 0 auto;
  background: #fafafa;
}

.main {
  flex: 0 0 66.6666%;
  height: 1500px;
}

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
}

.sidebar__widget {
  position: sticky;
  top: 0;
  background: yellow;
}

.margins {
  padding-top: 30px;
  padding-bottom: 30px;
}

<header class="header">header</header>

<div class="container">
  <div class="main">Main</div>
  
  <aside class="sidebar">
    <div class="sidebar__widget">
      <div class="margins">
        text2
      </div>
      <div class="margins">
        text3
      </div>
      <div class="margins">
        text4
      </div>
      <div class="margins">
        text5
      </div>
    </div>
  </aside>
</div>

<footer class="footer">footer</footer>

没有滚动到 text5 的 div，只有当我滚动之后的所有内容时。

我还录制了一个视频来显示一个问题：https://gyazo.com/d5337df7b814c0621ac59c1e85433965

我也尝试过 display： table，它也无法正常工作

HTML 弹性框 CSS-Position 粘性

我不确定是否正确理解..容器（黄色）的位置是粘性的，因此在滚动其内容时，它将保持相对于卡住的状态，直到其内容完成滚动。您分享的视频显示您的视口小于黄色框，当然，由于左侧的滚动区域，在它解锁其位置之前，您不会看到该视口。一旦发生，由于您有一个页脚，滚动将继续，黄色将再次参与滚动。你能更清楚地了解期望吗？.sidebar__widget.containertext5

答：

0赞 Diego D 11/13/2023 #1

这个问题可能不是很清楚，但是由于您展示了一个视频，其中您的（黄色容器）高于视口，我想您的意思是只有在滚动完全显示它之后，该元素才必须具有粘性。.sidebar__widget

为了实现这种行为，你需要改变它的 css 属性，这样如果视口更高，它就会保持设置为，否则，它被设置了一个偏移量，只有在它完全显示后才会粘住它，同时仍然滚动其父容器的一部分，该容器的左侧也包含最长的内容。top0

编辑：仅使用 css 是一个更理想的选择，但是（到目前为止，根据我现在所看到的）它需要您的侧边栏位于其容器的底部，并且当视口高于其高度时，它可能会产生可疑的结果。在这种情况下，你不会看到黄色盒子从其容器的上边缘开始，但你会看到它躺在底部。这是你要求的吗？

//sets the .sidebar__widget top css property according to window.innerHeight
function adjustStickySidebar() {
    var sidebarWidget = document.querySelector('.sidebar__widget');
    var sidebarHeight = sidebarWidget.offsetHeight;
    var windowHeight = window.innerHeight;

    if (sidebarHeight < windowHeight) {
        sidebarWidget.style.top = '0px';
    } else {
        sidebarWidget.style.top = `${windowHeight - sidebarHeight}px`;
    }
}

//Adjust the sticky sidebar on window load and resize
window.addEventListener('load', adjustStickySidebar);
window.addEventListener('resize', adjustStickySidebar);

.header,
.footer {
  text-align: center;
  height: 300px;
  background: white;
}

.container {
  display: flex;
  width: 600px;
  margin: 0 auto;
  background: #fafafa;
}

.main {
  flex: 0 0 66.6666%;
  height: 1500px;
}

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
}

.sidebar__widget {
  position: sticky;
  /*top decides where the elements sticks relative to the container*/
  /*zero works only if the viewport is taller than element's height*/
  top: 0;
  background: yellow;
}

.margins {
  padding-top: 30px;
  padding-bottom: 30px;
}

<header class="header">header</header>

<div class="container">
  <div class="main">Main</div>
  
  <aside class="sidebar">
    <div class="sidebar__widget">
      <div class="margins">
        text2
      </div>
      <div class="margins">
        text3
      </div>
      <div class="margins">
        text4
      </div>
      <div class="margins">
        text5
      </div>
    </div>
  </aside>
</div>

<footer class="footer">footer</footer>

.header,
.footer {
  text-align: center;
  height: 300px;
  background: white;
}

.container {
  display: flex;
  width: 600px;
  margin: 0 auto;
  background: #fafafa;
}

.main {
  flex: 0 0 66.6666%;
  height: 1500px;
}

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
  /* add this to place the element at the bottom */
  display: flex;
  flex-direction: column;
}

.sidebar__widget {
  position: sticky;
  bottom: 0;
  margin-top: auto; /* place at bottom */
  background: yellow;
}

.margins {
  padding-top: 30px;
  padding-bottom: 30px;
}

<header class="header">header</header>

<div class="container">
  <div class="main">Main</div>
  
  <aside class="sidebar">
    <div class="sidebar__widget">
      <div class="margins">
        text2
      </div>
      <div class="margins">
        text3
      </div>
      <div class="margins">
        text4
      </div>
      <div class="margins">
        text5
      </div>
    </div>
  </aside>
</div>

<footer class="footer">footer</footer>

当视口高于侧边栏高度时，您是否看到结果？你想让它躺在容器的底部吗？它不会改变原来的布局吗？我问是因为我的答案使用了 js 方法，因此很难吞咽。但是你认为你可以只保留CSS并仍然保持原始布局吗？当然，只是在寻找更好的解决方案

0赞 Temani Afif 11/13/2023

@DiegoD我什么都不想要，我给出答案。所有这些问题都需要问OP，而不是问我。

0赞 Diego D 11/13/2023

我提请您注意这个答案在特定情况下的垮台。您的评论没有解决我的观察结果，也无助于进一步解码问题。我看你不在乎。没关系

0赞 Temani Afif 11/13/2023

@DiegoD 你不是 OP，根据你对这个问题的评论，你甚至不确定 OP 想要什么，所以为什么要开始辩论你不确定的事情。如果您想要更多澄清，请与 OP 讨论/辩论。如果你认为我的答案不好，请投反对票。

0赞 Diego D 11/13/2023

投反对票时，我常常解释原因。我觉得问你是否打算（这就是你想要的原因......）改变布局，以及你是否检查了视口较高时发生了什么是公平的。你没有回答这个问题。我仍然认为这个答案是好的，如果它没有做出改变。顺便说一句，我预计会有不同的反应。我的意见并不重要，但最终我找到了取消删除我认为错误的答案的理由。

0赞 user2105483 11/23/2023 #3

使用此包 https://github.com/codecks-io/react-sticky-box 和此样式修复

display: flex; align-items: flex-start;用于容器

问题已解决

上一个：通过将显示更改为固定来“弹出”最小内容的 flex 项目

下一个：如何使固定的div响应？

位置粘性未使用 flexbox 完全滚动

position sticky is not scrolling full with flexbox

评论

评论

评论