大于屏幕尺寸的侧边栏的位置粘性

Question

大于屏幕尺寸的侧边栏的位置粘性

我有一个侧边栏，其高度大于屏幕尺寸，当使用时position: sticky，我将无法看到侧边栏的底部，直到滚动到页面末尾。例如，如何确保滚动时页面的 50% 已经显示侧边栏的下部？

这里的代码示例： https: //jsfiddle.net/zxypmqvg/3/

.main-block {
  display: flex;
}

.sidebar {
  background-color: LightCoral;
  width: 25%;
}

.sidebar-content {
  margin: 5px;
  margin-bottom: 40px;
  background-color: LimeGreen;
  position: sticky;
  top: 0;
}

.main-content {
  width: 75%;
  height: 4000px;
  background-color: LightBlue;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="main-block">
    <div class="sidebar">
      <div class="sidebar-content">
        <p>sometext for example for stackoverfrom</p>
        <p>sometext for example for stackoverfrom</p>
        <p>sometext for example for stackoverfrom</p>
        <p>sometext for example for stackoverfrom</p>
        <p>sometext for example for stackoverfrom</p>
        <p>sometext for example for stackoverfrom</p>
        <p>last string</p>
      </div>
    </div>
    <div class="main-content">

    </div>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

最后一个字符串仅在到达页面末尾时显示

Answer 1

小智 3

也许，一个好的做法是将此 css 添加到 .sidebar-content

overflow-y: auto;
max-height: 100vh;

Run Code Online (Sandbox Code Playgroud)

我希望看到它最初滚动到侧边栏底部，然后在用户开始向上滚动整个窗口时向上滚动（如本页所示）时的行为：https://tripconnect.pl/ (3认同)

归档时间：	4 年，2 月前
查看次数：	1367 次
最近记录：	4 年，2 月前