侧边栏位置粘滞，该位置大于屏幕大小 [英] Position sticky for sidebar whick is larger than screen size
本文介绍了侧边栏位置粘滞，该位置大于屏幕大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个高度大于屏幕尺寸的侧边栏，使用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>最后一个字符串仅在达到页末时显示
css
可能一个很好的做法是将此推荐答案添加到.sidebar-content
overflow-y: auto;
max-height: 100vh;
这篇关于侧边栏位置粘滞，该位置大于屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
