Sticky Footer JavaScript Solution

So I've implemented a sticky footer in which the .main element contains a .head elements with a relative position so that it stays at the top. It also contains a .foot element that will assume absolute positioning if there is enough room to do so. Otherwise, it will assume relative positioning so that the .head and .foot never overlap. The code is as follows:

var stickyFooter = function()
{
    var mainSize = $(".main").first().height();
    var headSize = $(".head").first().height();
    var footSize = $(".foot").first().height();
    if (headSize + footSize > mainSize)
    {
        $(".foot").first().css("position", "relative");
    }
    else
    {
        $(".foot").first().css("position", "absolute");
        $(".foot").first().css("display", "block");
        $(".foot").first().css("width", "100%");
        $(".foot").first().css("bottom", "0");
    }
};

$(function()
{
    stickyFooter();
    $(window).resize(function()
    {
        console.log("Resize");
        stickyFooter();
    });
});

It works fine on running on my computer but once I upload it to my host service (Bluehost) it becomes very selective as to when it wants to work. On Chrome, the sticky footer does not work at all. On Firefox, it seems to work consistently. I am just completely confused as to how I can fix this problem. Here is my website: http://glocalimpacts.org/

As you can see, the social icons which form the entirety of the .foot element should be absolutely positioned at the bottom of the page right now because the window is large enough to do so without overlapping on the .head. Despite working on Firefox, I've had no luck on other browsers. Can someone weigh in on this issue?