Force a menu to the top of the page when scrolling past the particular item; (seed, working prototype)

jquery.mbox.js

'use strict';
/*
 * (C) tfwroble 201408231822
 */

(function(w){

	/*
	
	  what I'm trying to do:

		- call this on document.ready
		- supply a tag (menu) you want to be tracked.
		- supply css for re-positioning the menu.
		  - I would like alternative states for
		    different screen dimensions.

		- on init
		  - load initial state (me.cap.ison)
		    - is screen and menu in need of initial repositioning?

	*/

	/*var*/w.
	mbox = function(el, options){
		// ------------------------------------------------------------
		// 
		// Initialize Element
		// 
		// ------------------------------------------------------------
			this.el  = el;
			this.$el = $(this.el);
			this.$d  = $(document);
		// 
		// ------------------------------------------------------------
			this.options =
			  {
				cssOverflow: {}, // on overscroll
				cssReset: {}, // on underscroll
				stylePush: 0,
				stylePull: 0
			  };
			this.options = $.extend(this.options,options);
		// 
		// Capture
		// - this is a state object
		// - initial state is caught when page is loaded (or refreshed)
		// - initial state (.hght) is maintained on window.resize
		// - 
		// 
		// ------------------------------------------------------------
			this.capture = function()
			  {
				var obj = {};
				obj.dtop = this.$d.scrollTop();
				obj.orig = (obj.dtop != 0) ? this.$el.prev().height() : this.$el.position().top;
				obj.ison = obj.dtop > obj.orig;
				obj.cson = false;
				obj.hght = this.$el.height();
				obj.iset = false;
				return obj;
			  };
		// 
		// window.resize event-handler
		// 
		// ------------------------------------------------------------
			this.sizeFunction = function(t)
			{
				var c = t.data.capture();
				var ca = t.data.cap.hght;
				var cb = c.hght;

				if (t.data.cap.hght!=c.hght)
				{
					if (t.data.cap.iset)

					  t.data.$el
						.next()
						.css("marginTop",c.hght)
						;
					console.log("Sizes: NOT SAME, new: ", c.hght,", old: ", t.data.cap.hght, t.data.$el.next().css("marginTop"));
				}
				else
				{
					console.log("Sizes: SAME, new: ", c.hght, ", old: ", t.data.cap.hght, t.data.$el.next().css("marginTop"));
				}

				t.data.cap.hght = c.hght;
			};
		// 
		// 
		// 
		// ------------------------------------------------------------
			this.menuOnset = function(t)
			  {
        	      t.data.$el
        	        .css(t.data.options.cssOverflow)
        	        .next()
        	        .css({marginTop: t.data.cap.hght});
        	      
        	      if (t.data.options.clsPush)
        	      {
        	        $.each(t.data.options.clsPush,function(){
        	          console.log('push',this);
        	        });
        	      }
				  
				  t.data.cap.iset = true;

			  };
		// 
		// ------------------------------------------------------------
			this.menuOffset = function(t){
        	  
        	  t.data.$el
        	    .removeAttr("style")
        	    .next()
        	    .removeAttr("style");
        	  
        	  if (t.data.options.clsPull)
        	  {
        	    $.each(t.data.options.clsPull,function(c){
        	      console.log('pull',this);
        	    });
        	  }
			  
			  t.data.cap.iset = false;
			};
		// 
		// ------------------------------------------------------------
			this.scrollFunction = function (t)
			  {

			  	//console.log("e",event,t);

				var obj = t.data.capture();
				if  ( t.data.cap.ison || obj.ison ) // apply
				  {
				    if (t.data.$el.css('position')!='fixed')
				    {
				      t.data.$el.trigger("menu.onset");
				    }
				  }
				else // remove
				  {
				  	if (t.data.$el.attr("style"))
				    {
        	          t.data.$el.trigger("menu.offset");
				  	}
				  }
				
				t.data.cap.ison = 0; // set it to false after initial load
				
				return 1;
			  };
		// 
		// ------------------------------------------------------------
		
		this.cap = this.capture();
		this.cap.cson = this.cap.ison;
		
		$(window).on('resize',this,this.sizeFunction);

		this
		this.$d
		  .     on('scroll',this,this.scrollFunction)
		  .     on('menu.onset', this,this.menuOnset)
		  .     on('menu.offset',this,this.menuOffset)
		  .trigger('scroll',this,this.scrollFunction);
		$(window)
		  .     on('scroll',this,this.scrollFunction)

		return this;

	};

})(window);