JavaScript Module Pattern document.ready not working

I have a basic example of the Module pattern that simply adds a class to the footer element on the page.

1. When the script is loaded in the body tag (after the footer element) it works and adds the class to the footer.

2. When the script is loaded in the head tag (before the footer element) it doesn't work even though the init shouldn't be getting called until the document is ready.

I assume the document.ready isn't working as expected and therefore it's not finding the footer element as it doesn't exist.

This has been bugging me for ages and I can't seem to find the solution, can someone please shed some light on this problem?

Example: http://ift.tt/1DHnotx

var App = (function ($) {
    "use strict";

    // private alias to settings
    var s;

    return {
        settings: {
            footer: $("footer")
        },

        init: function() {
            s = this.settings;

            this.footer();
        },

        footer: function(){
            s.footer.addClass("active");
        }
    };
})(jQuery);


jQuery(document).ready(function() {

    App.init();

});

Thank you