Question

OK – I’ve reduced this to it’s simplest form:

<div id="bar>47 px high bar</div>
<div id="header">
    <ul>
        <li>Nav1</li>
    </ul>
</div>

.

//Down
$(function() {
    var interval = setInterval(function() {
        if ($(window).scrollTop() >= 47) {
            $("#header").attr("id","header2");
            clearInterval(interval);
        }
    }, 50);
});
//Up
$(function() {
    var interval = setInterval(function() {
        if ($(window).scrollTop() < 47) {
            $("#header2").attr("id","header");
            clearInterval(interval);
        }
    }, 50);
});

It works, but only in one direction – if I load at the top of the page it works scrolling down. If I load halfway down the page it works scrolling up. Go the other direction after this and nothing happens. Anyone know why?

Answer 1

Read this article by John Resig (creator of jQuery) about caching and timers.

$(function() {
    var $window = $(window),
        $header = $('#header'),
        scrolled = false;

    $window.scroll(function () {
        scrolled = true;
    });

    setInterval(function() {
        if ( ! scrolled ) return;
        scrolled = false;
        $header.attr('id', $window.scrollTop() < 47 ? 'header' : 'header2');
    }, 50);
});

---

P.S. I’m not sure what exactly you’re trying to accomplish here, but it seems you’re trying to target the header via CSS, in which case you’d be better off toggling a class instead of messing with the id:

$header.toggleClass('alternate-header', $window.scrollTop() > 46);

Here’s the fiddle: http://jsfiddle.net/6KdQG/