jQuery/HTML5 Facebook timeline like sticky headers_问答_开发者

I have seen sticky headers implemented in many different places, the most recent of which is in Facebook's timeline feature. I am working on my business website and would like to implement the same functionality. If you still don't quite know what I am talking about you can go to http://www.facebook.com/timeline and scroll down the page.

I know how to do fixed headers, but I want it to stick to the top as soon as it leaves the visible area of the page and then disappear once I reach the next one.

If anyone is able to help, or to point me to an article that would help I would most appreciate it. (Yes, I did Google this first.

EDIT

Here is the code I have now:

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. Etia开发者_StackOverflow社区m 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>

Here's something similar where the new header replaces the old one as you scroll. It should get you started on the right track to creating your custom solution:

Demo: http://jsfiddle.net/AlienWebguy/mvtP7/1/

JQuery:

$(function(){
    var lastScrollTop = 0;
    $(window).scroll(function(event){
       var currentScrollTop = $(this).scrollTop();
       if (currentScrollTop > lastScrollTop){
           console.log('scrolling down');
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _next_header = $(this).nextUntil('.header').next('.header');
                    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
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _prev_header = $(this).prevUntil('.header').prev('.header');
                    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:

.header {
    background-color:#CCC;
    width:100%;
    top:0;
    left:0;
}

.header h2 {
    margin:20px;
}

.fixed {
    position:fixed;
}

If you find yourself looking back on this question, you may want to rewrite it using my library Balloon. The replacement of the sticky headers is such that it doesn't snap (like it does in ALienWebguy's example), if that was what you were going for. It should be really easy to integrate with Balloon, and the README is pretty thorough. You may also stack the headers if you wish. Let me know if this helped.

https://github.com/vhiremath4/Balloon

Use jquery waypoints. It has a 'sticky' plugin/shortcut that works like a charm. Just be careful, I used it on a project recently and had issues with dynamic content loading. The trick is to add the waypoints to elements that won't end up being sticky so that a recalculation of waypoints won't be messed up with css fixed waypoint elements.

I believe this jQuery plugin is what you're looking for:

https://github.com/bigspotteddog/ScrollToFixed

You can see a demo of it here: http://bigspotteddog.github.io/ScrollToFixed/

In particular, pay attention to how the elements in the sidebar work.