Sticky Footers using JQuery then CSS

Up until recently I have assiduously avoided JavaScript … no not the “I need a popup” JavaScript, I mean the kind of JavaScript that contains 1000s of lines of business logic with a metric ton of global level functions that all true object oriented programmers hate. It would be true to say that JavaScript and I have not been friends!

Recently I have been heavily into the world of JQuery and got a couple of interesting challenges attempting to create a simple web page that has a Sticky Footer. A sticky footer is simply a portion of the page that sticks to the bottom of the web browser window even though you use the scroll bar. I started to solve this problem using JQuery as that was my current hammer of choice. So this is how I solved it using JQuery, first you have a simple div declared in HTML as follows (assuming you have setup you JQuery references):

SF_PositionFooter = function() {
    $("#stickyfooter").css({ position: "absolute", top: ($(window).scrollTop() + 
    $(window).height() - $("#stickyfooter").height()) + "px" });

};

$(function() {
    //Set the postion during initialization
           SF_PositionFooter();
       
    //Subscribe to the scroll and resize events
        $(window)
        .scroll(SF_PositionFooter)
        .resize(SF_PositionFooter)
}

To be honest this solution gave me fits when attempting to integrate it with other JQuery code, scrolling and resizing suddenly became unstable and unpredictable which led me to a much simpler CSS solution as follows:

#stickyfooter {
    POSITION: fixed; WIDTH: 800px; BOTTOM: 0px; 
}