(function($)
{
    window.Banner = function(sel, top)
    {
        this.el = $(sel);
        if(this.el == null)
            return null;
        this.el.parent().css("position", "relative");
        this.global = $(window);
        this.topMax = parseInt(this.el.css("top"));
        this.topMargin = parseInt(top);
        this.topLimit = this.topMax - this.topMargin;
        
        this.relX = parseInt(this.el.css("left"));
        this.absX = parseInt(this.el.offset().left);                                               
        var self = this;        

        this.global.scroll(function(){self.onScroll();});
        this.global.resize(function(){self.onResize();});
    };
    
    window.Banner.prototype = 
    {
        topMargin   : 0,
        topMax      : 0,
        topLimit    : 0,
        el          : null,
        global      : null,
        absX        : 0,
        relX        : 0,
        something   : false,
        
        onScroll    : function()
        {  
            if(this.something)
                return false;                       
            this.something = true;
            var scrollTop = parseInt(this.global.scrollTop());
            var self = this;
            if(scrollTop > this.topLimit)
            {
                this.el.css("position", "fixed");
                this.el.css({top: self.topMargin + "px", left: self.absX + "px"});
            }
            else
            {
                this.el.css("position", "absolute");
               // this.absX = parseInt(this.el.offset().left); 
                this.el.css({top: self.topMax + "px", left: self.relX + "px"});
            }
            this.something = false;
        },
        onResize    : function()
        {
            this.el.css("position", "absolute");
            this.absX = parseInt(this.el.offset().left); 
            console.log(this.absX);   
        }
    };
})(jQuery);

 
$(document).ready(function()
{
    var banner = new Banner("#banner", 40);
});