CODEWITHSUNDEEP
jquerywindowscrollcss-position
android.nick
android.nick

Reputation: 11207

Jquery Iphone/Android scrolling Fixed header?

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'});
           }   
});

Upvotes: 3

Views: 2060

Answers (2)

Ольга Демчук
Ольга Демчук

Reputation: 11

That a jquery script http://jqueryfordesigners.com/iphone-like-sliding-headers/ does almost that you asked for

Upvotes: 1

cnanney
cnanney

Reputation: 2171

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

Upvotes: 2

Related Questions