我在position: sticky的帮助下创建了一个侧边栏，效果很好。
请参阅下面的脚本，了解颜色识别，并带有以下文本。
当黑色区域向下滚动时，绿色区域会粘在相对于红色顶栏的粘性位置。但绿色区域包含溢出页面视口的内容。
当滚动到达页面末尾时，即当过度飞行的绿色区域的高度等于页面中剩余滚动的高度时，绿色区域开始移动。
但是我想移动绿色区域以与黑色区域一起滚动，并在到达末尾时保持原位。这意味着，当侧边栏的高度大于视口时，侧边栏应在粘贴之前沿窗口的滚动方向滚动。(简而言之：我希望它像Facebook的侧边栏或类似的东西一样移动 https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)
这甚至可能与position:sticky有关吗？在javascript和jquery方面有一点帮助吗？
当position:sticky在这里时，我不想像其他几个库一样使用旧position:fixed！
* {
font-family: "Courier New", Courier, monospace;
color: #fff;
text-align: center;
}
.container {
height: 2000px;
position: relative;
}
.topbar {
height: 50px;
line-height: 50px;
background: #D16666;
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 0px;
z-index: 10;
}
.sidebar {
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 60px;
height: 1000px;
line-height: 1000px;
background: #B6C649;
border-radius: 5px;
position: -webkit-sticky;
position: sticky;
}
.row {
margin-left: 0;
margin-right: 0;
position: relative;
}
.main-content {
height: 1800px;
line-height: 1800px;
background: #2C4251;
border-radius: 5px;
top: 10px;
}
.col-8 {
top: 10px;
padding: 0;
padding-left: 0 !important;
}<html>
<head>
<link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="topbar">Topbar</div>
<div class="row">
<div class="col-4">
<div class="sidebar">Sidebar</div>
</div>
<div class="col-8">
<div class="main-content">Main Content</div>
</div>
</div>
</div>
</body>
</html>您需要侧边栏的顶部位置，即允许它向上移动的空间量。
一个小的javascript功能可以很容易地计算出这一点：
function set () {
var sidebar = document.getElementById("sidebar");
var sidebarHeight = sidebar.clientHeight;
var availableHeight = window.innerHeight;
var sidebarTop = availableHeight - sidebarHeight - 20;
// 20px is the amount of space that will be left under the bottom of the sidebar
// at the sticky position
sidebar.style.top = sidebarTop + "px";
}* {
font-family: "Courier New", Courier, monospace;
color: #fff;
text-align: center;
}
.container {
height: 2000px;
position: relative;
}
.topbar {
height: 50px;
line-height: 50px;
background: #D16666;
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 0px;
z-index: 10;
}
.sidebar {
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 60px;
height: 1000px;
line-height: 1000px;
background: #B6C649;
border-radius: 5px;
position: -webkit-sticky;
position: sticky;
margin-top: 10px;
}
.row {
margin-left: 0;
margin-right: 0;
position: relative;
}
.main-content {
height: 1800px;
line-height: 1800px;
background: #2C4251;
border-radius: 5px;
top: 10px;
}
.col-8 {
top: 10px;
padding: 0;
padding-left: 0 !important;
}
button {
position: absolute;
top: 0px;
left: 0px;
height: 30px;
background-color:blue;
z-index: 10;
}<head>
<link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>
<div class="container">
<div class="topbar">Topbar</div>
<div class="row">
<div class="col-4">
<div class="sidebar" id="sidebar">Sidebar</div>
</div>
<div class="col-8">
<div class="main-content">Main Content</div>
</div>
</div>
</div>
<button onclick="set();">click me</button>它完全是它应该做的。您有高度为 1800 像素的框和高度为 1000 像素的粘性元素。它是粘性的，直到它到达相对父框的底部。粘性应切换到相对。模拟固定元素。
编辑：删除了不正确和误导性的摘要，广告评论