Jquery Iphone/Android scrolling Fixed header?

Question

In the contacts on both iphone and android, when you get down to the B's, the heading "B" is fixed to the top of the scrollable windows until you scroll down to the C heading, when you get to the C heading, it replaces the B heading, so if a person in looking at one of his 200 E contacts, he knows he's in the E section. does that make sense? when the heading hits the top of the window, it sticks and stays fixed until the top of the window is scrolled to the next heading, in which-case the new heading replaces it when the top of the heading reaches the top of the window, etc.

$(window).scroll(function() {
var title_top = $('h2').top()
var window_top = $(window).top()

    if (title_top <= window_top) {
        $('h2').css({position:'fixed', top:'0'});
    } else {
        $(this).css({position:'static'});
           }   
});

OR?

$(window).scroll(function() {


    if ($(window).scrollTop < $('H2').offset().top) {
        alert('yay! awesome.')
    } else {
        $(this).css({position:'static'});
           }   
});

Answer 1

Node.js documentation uses a similar technique, I'd check out their code for some ideas.