带有“ else if”语句的jQuery scrollTop不起作用

Question

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');         
    }
});

The "if" and "else" statement works but "else if" statement doesn't work...
Have you any idea why does not work?
(I apologize for my English)

Answer 1

I solved! There was an error in the second variable, missing parentheses to the operation. I decide to create a jsfiddle with an example of what I wanted to do, hoping that it will help someone in the future.

Thank you all

Here the link: JSFiddle

$(document).ready(function(e) {

var mainHeight = $('#header').height()/2;
var footHeight = ($('body').height() - $('#footer').height() - 290);

$(window).scroll(function(){
    if ($(window).scrollTop() < mainHeight) {
        $('#fixed-box').css({
            "bottom" : "calc(100% - 310px)",
        });

    } else if ($(window).scrollTop() > footHeight) {
        $('#fixed-box').css({
            "bottom" : "calc(260px)",
        });

    } else {
        $('#fixed-box').css({
            "bottom" : "calc(50% - 25px)",
        });         
    }
});          

});