My single-page scrolling website's links remain active after press and my navigation is broken until I scroll
<p>I created a single-page website that uses twitter's bootstrap for a fixed position nav bar at the top.  I use some jquery plugins to slowly scroll the page.  The site works fine on my desktop; however, a problem arises when opening the site on a mobile device.  I have currently only tested it on my iPhone 4 at the moment.  The page scrolls fine when I click; however when I go to click another link immediately after, I can't.  I've discovered that after I scroll the page a little, functionality returns to the nav bar.  I've tried narrowing the problem down to no avail.  To see the problem for yourself, here's a barebones version of my site: <a href="http://boundincode.com/demo/iPhoneIssue/" rel="nofollow">here</a>.</p>

<p>Here's the javascript: </p>

<pre><code>$(function() {
  $('ul.nav a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
});
</code></pre>

<p>});
Thanks for any help!</p>
