Array of numbers, check to see which 2 numbers the current value is between
<p>I have an array of numbers. 0,136,1084,3521,3961,5631,6510,7901,8204 (which are the current scrollTops of all of the sections on one page.) I'm trying to find a way to take the current window scrollTop and find out which of these values it's currently between so that when the page is being scrolled, the active navigation item switches.</p>

<p>Currently, while scrolling, 'current page' skips 0 and goes straight to 1 in the array, and as a result, is unable to catch the last page.</p>

<pre><code>currentPage = 0;
divOffset = new Array();

function setCurrentPage() {
    divOffset = []; //this ends up as 0,136,1084,3521,3961,5631,6510,7901,8204

    //get offset and ID of each section and add to array.
    $(".section").each(function() {
        sectionOffset = $(this).offset();
        divOffset.push(Math.round(sectionOffset.top));
    }); 

    bodyOffset = $(window).scrollTop(); 

    for(i=0; i &lt; divOffset.length; i++) {
        if( divOffset[i] &gt;= bodyOffset ) {
            currentPage = i;
            $('#mainNav li').removeClass("active");
            $("#mainNav li #a-" + currentPage).parent().addClass("active");
            return false;
        }
    }   

}
</code></pre>

<p>My navigation looks something like this:</p>

<pre><code>&lt;ul id="mainNav"&gt;
    &lt;li class="active"&gt;&lt;a href="#a-0" class="navA" id="a-0"&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menuLI"&gt;&lt;a&gt;works&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href='#a-1' class='navA' id='a-1'&gt;Websites&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#a-2' class='navA' id='a-2'&gt;Illustrations&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#a-3' class='navA' id='a-3'&gt;Photomanipulations&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#a-4' class='navA' id='a-4'&gt;Glam Guitars&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#a-5' class='navA' id='a-5'&gt;Logos&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#a-6' class='navA' id='a-6'&gt;Photography&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#a-7" class="navA" id="a-7"&gt;about&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#a-8" class="navA" id="a-8"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>You can look at it here: <a href="http://glowtagdesign.com/index2.php#a-0" rel="nofollow">http://glowtagdesign.com/index2.php#a-0</a></p>
