我不确定我想要实现的行为是否有具体名称(在标题中)。
我举个例子:在 GitHub 的问题页面上(例如 here)，右栏(包含关于标签、里程碑、受让人的信息)有一个固定的位置，但只有当你向下滚动时。换句话说，当您开始滚动它时，它似乎有一个 static 布局，但是当您进一步滚动时，它会快速移动到顶部并像一个 fixed 布局一样。
另一个例子是一些 Google Developer documentation 上的左右栏(导航和内容)以我上面描述的类似方式行事。
我希望我的问题不是太含糊，虽然我知道 CSS 中的 position: fixed;，但我不确定如何调整它以实现上述预期效果。
最佳答案
您可以通过使用 Jquery 或 javascript 在滚动上添加和删除类来完成此操作，我在这里使用的是 jquery。同样在下面的示例中，我添加了一个类来在侧边栏到达页脚时停止它，但是如果您只想让它继续运行，您可以删除该部分并保持侧边栏滚动。
这是一个 fiddle Fiddle Demo
我已将它放在一个完整的 html 页面中，因此您只需将其复制并粘贴到您的文本编辑器中，就可以看到它的实际效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{padding: 0;margin: 0;color:#fff;}
header{background: blue;height: 100px;text-align: center;}
footer{background: blue;height: 1000px;text-align: center;}
.content-container{position: relative;}
.main-content{margin-left:200px;background: purple;height: 1000px;text-align:center;}
.sidebar{
position:absolute;
top:0;left:0;
background: green;
height: 200px;
width: 200px;
text-align:center;
/*like to add the following to stop from jumpy scrolling in webkit browsers*/
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar.sidebar-fixed{position:fixed;}
.sidebar.sidebar-stop{position: absolute;bottom:0;top:auto;}
</style>
</head>
<body>
<header>Header</header>
<div class="content-container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
<footer>Footer</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var contentTop = $('.content-container').offset().top;
var sidebarHeight = $('.sidebar').height();
var contentBottom = $('footer').offset().top - sidebarHeight;
$(window).scroll(function(){
var scrolltop = $(this).scrollTop();
//starts the fixed sidebar
if(scrolltop >= contentTop){
$('.sidebar').addClass("sidebar-fixed");
}else{
$('.sidebar').removeClass("sidebar-fixed");
}
//stops the fixed sidebar
if(scrolltop >= contentBottom){
$('.sidebar').addClass("sidebar-stop");
}else{
$('.sidebar').removeClass("sidebar-stop");
}
});
</script>
</body>
</html>
关于javascript - 仅在向上滚动时固定 CSS 中的布局位置(对齐到顶部)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36848955/