Stop and play on $(window).scroll ...

[Scopestyle]

Hi Mottie,

http://jsfiddle.net/Scopestyle/hxbv4/

What I thought would be pretty straight forward is giving me headaches. I'm trying to have the slider stop and play based on the top position of the document.

In the above fiddle I have recreated what I'm trying to achieve. The header class gets an extra class on scroll and then tells the slider to stop or play (but sadly, it doesn't) Any idea what I'm missing?

Thank you in advance!

[Mottie]

Hi @Scopestyle!

The code in that demo was written to continually toggle the class on the header, then check for that class. A much more efficient method would be to check the scroll height against a variable used as a flag (updated demo):

var t,
    $d = $(document),
    $h = $('#header'),
    $s = $('#slider'),
    small = false;

$(window).scroll(function(){
    t = $d.scrollTop();
    if (t > 10 && !small) {
        $h.addClass("small");
        $('#slider').data('AnythingSlider').startStop();
        small = true;
    } else if (small && t <= 10) {
        $h.removeClass('small');
        $('#slider').data('AnythingSlider').startStop(true);
        small = false;
    }
});

The document, slider and header elements are cached to reduce lag time (depending on the browser window scroll may fire constantly while scrolling). Also, the demo has commented out console.log messages that show when the if statements are being executed in case you want to check.

[Scopestyle]

Super, thank you so much!