我已经看到在许多不同的地方实现了粘性标题，其中最新的是在 Facebook 的时间线功能中。我正在我的商业网站上工作，并希望实现相同的功能。如果您仍然不太清楚我在说什么，您可以访问http://www.facebook.com/timeline并向下滚动页面。
我知道如何做固定标题，但我希望它在离开页面的可见区域后立即粘在顶部，然后在我到达下一个时消失。
如果有人能够提供帮助，或者将我指向一篇对我有帮助的文章，我将不胜感激。（是的，我先用谷歌搜索了这个。
编辑
这是我现在拥有的代码：
jQuery
$(function(){
var lastScrollTop = 0;
$(window).scroll(function(event){
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > lastScrollTop){
console.log('scrolling down');
$('.sticky').each(function(){
if($(this).hasClass('fixed'))
{
var _next_header = $(this).nextUntil('.sticky').next('.sticky');
if($(_next_header).length > 0)
{
if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top)
{
// Bottom of header hit top of next header
$(this).removeClass('fixed').addClass('relative');
$(_next_header).removeClass('relative').addClass('fixed');
}
}
}
});
}
else
{
// Scrolling up
$('.sticky').each(function(){
if($(this).hasClass('fixed'))
{
var _prev_header = $(this).prevUntil('.sticky').prev('.sticky');
if($(_prev_header ).length > 0)
{
if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height()))
{
// Top of header hit bottom of previous content box
$(this).removeClass('fixed').addClass('relative');
$(_prev_header).removeClass('relative').addClass('fixed');
}
}
}
});
}
lastScrollTop = currentScrollTop;
});
});
CSS
h1.sticky {
font-family: 'Poller One', cursive;
font-size: 2em;
color: #555;
margin: 20px 0;
top: 0;
left: 0;
}
.fixed {
position:fixed;
}
.relative {
position: relative;
}
HTML
<div id="content">
<div class="section">
<h1 class="sticky">WattzUp Web Design</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis quam in nisi suscipit elementum. Curabitur hendrerit lorem non elit ornare vitae egestas tellus viverra. Nulla facilisi. Proin molestie accumsan varius. Quisque tincidunt consectetur ligula, a ornare magna volutpat nec. Aenean tristique adipiscing nisl laoreet commodo. Etiam lobortis varius sapien sit amet facilisis. Nullam ac imperdiet enim. Nunc non arcu dolor.
</div>
<div class="section">
<h1 class="sticky">About</h1>
Aliquam non mauris sit amet nibh mollis tempor. Phasellus ut ante nisl, et facilisis sapien. Sed sit amet turpis nulla, laoreet elementum erat. Integer posuere semper dignissim. Mauris sit amet lacinia purus. Donec consectetur laoreet enim, in vehicula turpis dapibus eu. Nam rhoncus urna id libero molestie et adipiscing velit adipiscing. Nunc vel tortor felis. Praesent vitae purus vitae mauris aliquam condimentum nec ac arcu. Vivamus turpis orci, porta gravida pulvinar ac, vehicula in nunc. Nam in elementum lacus.
</div>
<div class="section">
<h1 class="sticky">Technologies</h1>
Quisque non massa mi, ut vulputate nulla. Donec interdum justo non est facilisis ac gravida mi lacinia. Suspendisse tincidunt adipiscing tortor non mattis. Integer nec lacus lacus, non commodo lorem. Etiam faucibus, risus ut molestie malesuada, justo tellus tempus felis, a viverra ligula lectus quis massa. Nulla vel nisi sed mauris tincidunt gravida. Vestibulum venenatis, massa vitae congue volutpat, enim arcu varius sapien, ut pulvinar nulla mauris eget tortor. In at magna in quam feugiat fringilla. Aliquam erat volutpat. Nulla lectus nisl, laoreet eget hendrerit eget, porta ac odio. Etiam dignissim vehicula rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dictum malesuada libero eget auctor. Nulla felis neque, posuere vitae rutrum vitae, rutrum quis ipsum.
</div>
<div class="section">
<h1 class="sticky">Projects</h1>
Aliquam mauris eros, volutpat eu pretium in, scelerisque eget augue. Sed blandit adipiscing lacus quis sagittis. Donec vulputate aliquet erat nec vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris at tortor blandit eu venenatis nibh porttitor. Mauris auctor quam et quam varius laoreet. Pellentesque nisi quam, venenatis vel vehicula nec, gravida at leo.
</div>
<div class="section">
<h1 class="sticky">Testimonials</h1>
Suspendisse pharetra nunc quis eros scelerisque at posuere quam vestibulum. Nullam et diam id eros vestibulum aliquam. Sed et est arcu. Praesent vehicula vulputate leo, eget fermentum purus suscipit sed. Donec erat leo, pulvinar quis dapibus id, adipiscing quis nibh. Quisque in odio vel nibh facilisis congue at vitae dolor. Praesent non augue libero, laoreet viverra lacus. Cras vitae est quis massa suscipit egestas in ac arcu. Morbi ut justo sit amet mauris commodo bibendum ac sed turpis. Nullam at nisi quam, id convallis dui.
</div>
</div>