Switch class on reaching same Alphabet block while scrolling down or up

Question

I have a div with horizontal list of all alphabets and below it there are block of names starting with each alphabet and header of each block is same alphabet.

So I want to add a class in div containing alphabet which is child of div with horizontal list .

You can see sample link. On scrolling down you'll see Alphabet block which we are currently in will have pink colored selection on top horizontal bar.

You can use Bootstrap Scroll Spy Look at the answers in this post: http://stackoverflow.com/questions/13134013/how-to-use-bootstrap-scroll-spy — Ben Van Hees, Jul 29 '14 at 12:43
I think this question is essentially dependent on a link to the website in progress, and as such does not contain the necessary elements in the question itself. Voting to close. — halfer, Dec 17 '15 at 18:22

score 0 · Accepted Answer · edited May 23 '17 at 11:59

You'll probably want to compare the window scroll position with each of the 'sections' on the document.

$(document).ready(function(){
    $(window).scroll(function(e){
        var sp = $(this).scrollTop();
        $('div[data-letter]').each(function(){
            if(sp > $(this).offset().top-40){
                $('#nav span').removeClass('active');
                $('#nav span[data-letter="'+$(this).attr('data-letter')+'"]').addClass("active");
            }
        });
    });
});

This can be (massively) improved, but this should you a good starting point. I'd have spent a bit more time on it if you'd have created a MCVE showing us what you'd already tried!

JSFiddle

Switch class on reaching same Alphabet block while scrolling down or up

1 Answers1