Problematic jQuery scrolling code

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?

Any reason you're not using the scroll event (with a timer)? — Joseph Silber
– Joseph Silber, Commented Nov 13, 2012 at 0:12
once you clear the interval once.. code won't fire again until next page load — charlietfl
– charlietfl, Commented Nov 13, 2012 at 0:14

Joseph Silber · Accepted Answer · 2012-11-13 17:51:13Z

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/

edited Nov 13, 2012 at 17:51

answered Nov 13, 2012 at 0:18

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.M. D. · Accepted Answer · 2012-11-13 00:22:07Z

Working sample of what I think you're aiming for:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            var cacheState = $(window).scrollTop(); //detect when scroll has changed
             function downAndUp() {
                if (cacheState != $(window).scrollTop()) {
                    var target = $("li.first").offset().top;
                    if ($(window).scrollTop() >= target) {
                        console.log("Scrolled past li.first");
                        $("#header").addClass("header2");
                        cacheState = $(window).scrollTop();
                    }
                    else {
                        target = $("#bar").outerHeight();
                        if ($(window).scrollTop() <= target) {
                            console.log("Scrolled before li.first");
                            $("#header").removeClass("header2");
                            cacheState = $(window).scrollTop();
                        }
                    }
                }
            } 
            $(document).ready(function(){
                setInterval('downAndUp()',45)
            }); 
        </script>   
        <style type="text/css">
        .header2 {}
        </style>
    </head>
    <body>
    <div id="bar" style="height:300px;">Height:~300px</div>
    <div id="header">
        <ul style="display:block;">
            <li class="first">THIS</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>
            <li>&hellip;</li>       
        </ul>
    </div>
    </body>
    </html>

Paulo R. · Accepted Answer · 2012-11-13 02:01:15Z

0

If you clear the interval (clearInterval) what's starting it again, once you scroll back up/down? You have to start it somehow.

You don't need to do it this way. No need for setInterval. window has a scroll event which you can use for this kind of stuff.

An example using the scroll event (jquery)

var $window = $(window),
    $header = $('#header');

$window.on('scroll', function () {
    $header.toggleClass('header2', $window.scrollTop() >= 47);
});

Here's a fiddle.

edited Nov 13, 2012 at 2:01

answered Nov 13, 2012 at 0:13

Paulo R.

15.7k4 gold badges33 silver badges42 bronze badges

Collectives™ on Stack Overflow

Problematic jQuery scrolling code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related