jQuery scrollTop with "else if" statement doesn't works

I'm trying to addClass and removeClass to a div based on top scrolling with jquery.

I created these two variables:

var mainHeight = $('#main-image').height()/1.10;
var footHeight = $('body').height() - $('footer').height();

And this is the script that doesn't works:

$(window).scroll(function(){

    if ($(window).scrollTop() > mainHeight) {
        $('#box_centrale').removeClass('chat-bottom, chat-top');

    } else if ($(window).scrollTop() > footHeight) {
        $('#box_centrale').removeClass('chat-bottom');
        $('#box_centrale').addClass('chat-top');    

    } else {
        $('#box_centrale').removeClass('chat-top');
        $('#box_centrale').addClass('chat-bottom');         
    }
});

Have you any idea why not work? thanks in advance