由于我之前在这里得到了如此快速和相关的帮助，我想我会带着另一个问题回来。
我喜欢这个：http: //jsfiddle.net/Tgm6Y/4624/
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#one').followTo('#two');
由 MicronXD 提供。
我正在寻找一个 div 滚动，直到它的顶部到达屏幕的顶部，然后让它保持固定在那里，直到它到达它下面的 div 的顶部，在我的例子中，是文档的页脚。
父 div 没有指定高度，而是由页面内容决定。
如果这已在其他地方得到回答，请原谅我，但在我的搜索中，我找不到任何符合我所追求的东西。
提前谢谢了，
标记
我已经按照下面 Matmarbon 的 jsfiddle 中的建议添加了代码，并将其包装在他评论中给出的代码中。可悲的是，我所能实现的只是子元素确实保持固定，只有当它的顶部碰到屏幕顶部，但是当它遇到下面的 div 时，它应该停止，它会继续并将其重叠。
我显然想要更多帮助，但不知道该怎么做。我是否应该将您重定向到我试图实现这一目标的页面。如果有帮助，请访问 http://piciscan.co.uk/experiment/slide-scanning-service。
我很茫然，希望能得到更多帮助。提前致谢。
标记
[2013-05-17 10:09:53 编辑]
正确的！！！排序它！我在上面提到的页面上有标签式导航，向客户显示扫描幻灯片的不同选项。这在 js 上运行并且需要
<body onload="init()">
让它工作。删除那段代码会使滚动 div 按需要工作。可悲的是，它删除了选项卡式导航的功能。但是，无论如何，我找到了另一种不需要“onload”功能即可工作的选项卡式导航。
如果有人感兴趣，它看起来像这样：
首先，位于头部的javascript：
<script type="text/javascript">
var previoustab=""
function showMe(cid){
if (document.getElementById){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
return false
}
else
return true
}
function loadForm(){
showMe("page1")
}
if (window.addEventListener)
window.addEventListener("load", loadForm, false)
else if (window.attachEvent)
window.attachEvent("onload", loadForm)
else if (document.getElementById)
window.onload=loadForm
</script>
现在的html：
<ul id="tabs">
<li><a href="#firstinfo" onClick="return showMe('page1')" class="selected">
First Info</a></li>
<li><a href="#secondinfo" onClick="return showMe('page2')">
Second Info</a></li>
<li><a href="#thirdinfo" onClick="return showMe('page3')">
Third Info</a></li>
</ul>
<div id="tabwrapper">
<div id="page1" class="content">
<h2>Here's some information</h2>
blah<br>blah<br>blah
</div>
<div id="page2" class="content">
<h2>Here's some more information</h2>
blah<br>blah<br>blah
</div>
<div id="page3" class="content">
<h2>And some MORE information</h2>
blah<br>blah<br>blah
</div>
</div>
随附的CSS：
ul#tabs {list-style: none;
margin: 30px 0 0 0;
padding: 0 0 3px 0;}
ul#tabs li {display: inline;}
ul#tabs li a {color: #42454a;
background-color: #dedbde;
border: 0;
padding: 0.3em;}
ul#tabs li a:hover {background-color: #f1f0ee;}
ul#tabs li a.selected {color: #000;
background-color: #f1f0ee;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;}
#tabwrapper {border: 0;
padding: 0.5em;
background-color: #f1f0ee;}
.content {display: none;}
最后，jQuery：
<script type="text/javascript">
$(document).ready( function()
{
$("a").click( function()
{
$(".selected").removeClass("selected");
$(this).addClass("selected");
} );
});
</script>
希望这会对某人有所帮助。