如何在元素到达网页中的某个位置时修复元素的位置？

Question

如果这个问题太愚蠢，请原谅我。我正在制作一个网页，其中包含两部分（上部和下部）。当我向下滚动页面时，我希望标题的下部仍然留在此处。我怎样才能实现这个？我打算编写一个JavaScript来处理这个问题 - 一旦下半部分达到（0,0），它的位置将从相对变为绝对。我认为这是可行的，但我只是想知道是否存在一个更好，更简单的方法来做到这一点。 谢谢！

Answer 1

检查这个动作：http://jsfiddle.net/JLETx/4/

更新：固定的 “跳楼内容”

HTML

<div id="topHeader">top header</div> 
<div id="bottomHeader">bottome header</div> 
<div id="extremelyLongContent"> long content here </div> 

JS

var initial = $('#bottomHeader').offset(); 

$(document).scroll(function() { 
if ($(this).scrollTop() > initial.top) { 
    $('#bottomHeader').css('position', 'fixed'); 
    $('#topHeader').css('margin-bottom', initial.top+'px'); 
    $('#bottomHeader').css('top','0'); 
} 
else { 
    $('#bottomHeader').css('position', 'static'); 
    $('#topHeader').css('margin-bottom', 0); 
} 

}); 

CSS

body{ 
position:relative; 
} 

#topHeader{ 
background:red; 
height:100px; 
} 
#bottomHeader{ 
background:blue; 
height:100px; 
width:100%; 
} 

#extremelyLongContent{ 
background:green; 
height:1000px; 

} 

Answer 2

结账jQuery Waypoints。听起来像它可以派上用场。