Change ID on scroll -- weirdness happening
<p>I'm working on changing the ID of an element when the user has scrolled to a certain point on the page:</p>

<p><a href="http://jsfiddle.net/QupNv/6/" rel="nofollow">http://jsfiddle.net/QupNv/6/</a></p>

<p>The ID is supposed to change depending on where they are.  Here's my code:</p>

<pre><code>$(window).scroll(function() {

var scrollTop = $(window).scrollTop(),
    divOffset = $('#b').offset().top,
    dist = (divOffset - scrollTop);

$('.message').text(dist);

if (dist &gt;= 100 &amp;&amp; dist &lt;= 200) {
    $('.switch').attr('id', 'd')
}
else if (dist &gt; 1 &amp;&amp; dist &lt; 100) {
    $('.switch').attr('id', 'e')
}
else {
    $('.switch').attr('id', 'c')
}
});
</code></pre>

<p>It works like a dream when I have one condition, but if I add the if else then it wants to jump back up to the top of the window and not continue scrolling down.  Any pointers on what I'm doing wrong?</p>

<p>Any help is greatly appreciated! Thanks!</p>
