logo标签列表

大屏幕侧边栏的粘性定位

csscss-positionsticky
8
我有一个侧边栏，其高度比屏幕尺寸大，当使用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;
}
<!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>

当滚动到页面底部时，只有最后一个字符串才会显示

1个回答
3
也许，一个好的做法是将此CSS添加到.sidebar-content。
overflow-y: auto;
max-height: 100vh;
3
我很乐意看到这种行为，当侧边栏最初滚动到底部时，然后当用户开始向上滚动整个窗口时，侧边栏也随之向上滚动，就像这个页面上的效果：https://tripconnect.pl/ - Piotrek Zatorski
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接