さまざまな場所でスティッキー ヘッダーが実装されているのを見てきましたが、最新のものは Facebook のタイムライン機能にあります。私は自分のビジネス Web サイトに取り組んでおり、同じ機能を実装したいと考えています。何を言っているのかまだよくわからない場合は、http://www.facebook.com/timelineにアクセスして、ページを下にスクロールしてください。
ヘッダーを固定する方法は知っていますが、ページの表示領域を離れるとすぐに上部に貼り付けて、次のヘッダーに到達すると消えるようにしたいと考えています。
誰かが助けてくれたり、役立つ記事を教えてくれたりしたら、とても感謝しています。(はい、私はこれを最初に Google で行いました。
編集
ここに私が今持っているコードがあります:
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>