0

I'm using the jquery-mousewheel.js plugin, and I'd like to decide, if user scrolls down, then the content should fade out, and the user should see the next section. During this event, a class changing, and the event should stop, and only the next scroll down should fire it again (bind/unbind). I've tried the code below but its not working, any advice is appreciated.

$('body').bind('mousewheel', function(event, delta) {
    if (delta> 0){
        return false;
    } else{
    if ($("#next-screen").hasClass("home")){
       // Hide home, show news
    $("#next-screen").removeClass();
    $("#next-screen").addClass("news");
    $( 'body' ).unbind( "mousewheel" );
} else
if ($("#next-screen").hasClass("news")){
    //Here should bind again
    //Hide news, show about
    $("#next-screen").removeClass();
    $("#next-screen").addClass("about");        
}
//etc.
}
});
Chuchy
  • 53
  • 1
  • 6
  • Well if you unbind the event, you would need to rebind it when you want it added. Where are you doing that? – epascarello Oct 23 '15 at 15:00
  • Possible duplicate of [jQuery: Unbind event handlers to bind them again later](http://stackoverflow.com/questions/516265/jquery-unbind-event-handlers-to-bind-them-again-later) – Mark Oct 23 '15 at 15:34
  • @Mark Actually that's my question: how to rebind it. I've commented in my code, where I'd like the rebind, but since it is inside a function, I don't know how to make it work. If I try simply: `$("body").bind( "mousewheel" );` that doesn't work. – Chuchy Oct 23 '15 at 17:17

0 Answers0