CODEWITHSUNDEEP
jqueryhtml
barisatbas
barisatbas

Reputation: 564

Jquery Get Element's Top Offset While Scrolling

I want to display Iphone contact list style list on the mobile screen. Basically, while scrolling, header will be first visible item's first letter.

For Example: if first visible item is 'Adidas', header will be 'A':

Iphone style list

I created an ul and lots of li in it: 

<ul class="onlineShopList">
        <li class="activeRow">
            <span class="left">A1</span>   
            <span class="right">12 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="normalRow">
            <span class="left">A2</span>   
            <span class="right">18 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="activeRow">
            <span class="left">A3</span>   
            <span class="right">243 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="normalRow">
            <span class="left">B1</span>   
            <span class="right">191 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="activeRow">
            <span class="left">B2</span>   
            <span class="right">12 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="normalRow">
            <span class="left">B3</span>   
            <span class="right">18 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="activeRow">
            <span class="left">C1</span>   
            <span class="right">243 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
        <li class="normalRow">
            <span class="left">C2</span>   
            <span class="right">150 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>  
        <li class="activeRow">
            <span class="left">C3</span>   
            <span class="right">1 Articles</span> 
            <span class="clear">&nbsp;</span>
        </li>
</ul>

it is very simple, and here is the jquery function in order to handle scrolling and change the header:

$(window).scroll(function() {                  
               $top = $('.onlineShopList').offset().top;
               /*console.log("item: " + $('.onlineShopList li:first:visible').find('span.left').text())            
               $('#headChar').text($('.onlineShopList li:first:visible').find('span.left').text().charAt(0));*/

               $('.onlineShopList li').each(function() {
                    console.log("current item top : " + $(this).offset().top)
                    if ($(this).offset().top >= $top) {
                        console.log("top char: " + $(this).find('span.left').text().charAt(0))
                        $('#headChar').text($(this).find('span.left').text().charAt(0));
                        return false; // stops the iteration after the first one on screen
                    }
               });
        });

But header always A, I couldn't figure out this. Top Offset of first item doesn't change while scrolling, Maybe this method is wrong.

Please Help!

Upvotes: 3

Views: 5954

Answers (2)

ElBel
ElBel

Reputation: 1994

I'm trying to solve a very similar problem. I was concerned about getting offsets for a long list of items, performance-wise, as the scroll event fires pretty frequently. I chose to approach it in the manner suggested by this:

Using jQuery to find an element at a particular position?

As the user scrolls, I check which object is in the top row of my viewport and set the header accordingly.

Upvotes: 1

Engineer
Engineer

Reputation: 48813

Try like this:

if ($(this).offset().top >= $top + $(window).scrollTop()) {

Upvotes: 4

Related Questions