我想创建一个div，它位于一个内容块的下面，但一旦页面已经滚动到足以接触其顶部边界，就会固定在原地并与页面滚动。
当前回答
截至2017年1月和Chrome 56的发布，大多数常用的浏览器都支持CSS中的position: sticky属性。
#thing_to_stick {
position: sticky;
top: 0px;
}
在火狐和Chrome浏览器中都是如此。
在Safari中，你仍然需要使用position: -webkit-sticky。
Polyfills可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是个不错的网站。
其他回答
这不是一个确切的解决方案，但却是一个很好的选择
这个CSS只有屏幕滚动条顶部。解决了所有的问题，只有CSS，没有JavaScript，没有JQuery，没有脑力劳动(lol)。
享受我的小提琴:D所有的代码都包括在那里:)
CSS
#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}
.w {
width: 900px;
margin: 0 auto;
margin-bottom: 40px;
}<br type="_moz">
把内容放长一点，这样你就能看到效果了:) 哦，推荐人也在里面，因为他值得表扬
CSS只有屏幕滚动条的顶部
截至2017年1月和Chrome 56的发布，大多数常用的浏览器都支持CSS中的position: sticky属性。
#thing_to_stick {
position: sticky;
top: 0px;
}
在火狐和Chrome浏览器中都是如此。
在Safari中，你仍然需要使用position: -webkit-sticky。
Polyfills可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是个不错的网站。
最简单的解决方案(没有js): 演示
.container {
position: relative;
}
.sticky-div {
position: sticky;
top: 0;
}
<div class="container">
<h1>
relative container & sticky div
</h1>
<div class="sticky-div"> this row is sticky</div>
<div>
content
</div>
</div>
你可以简单地使用css，将你的元素定位为fixed:
.fixedElement {
background-color: #c0c0c0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
编辑:你应该有一个绝对位置的元素，一旦滚动偏移到达元素，它应该被改变为固定，顶部位置应该被设置为零。
你可以用scrollTop函数检测文档的顶部滚动偏移量:
$(window).scroll(function(e){
var $el = $('.fixedElement');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '0px'});
}
});
当滚动偏移量达到200时，元素会粘在浏览器窗口的顶部，因为是固定放置的。
为回答这个问题提供的信息可能对你有帮助，埃文:
检查滚动后元素是否可见
基本上，只有在验证document.body.scrollTop值等于或大于元素的顶部之后，才希望修改元素的样式，将其设置为fixed。
