https://sanei-air.jp/js/exfixed.js

1/*
2 * 	exFixed 1.3.1 - jQuery plugin
3 *	written by Cyokodog	
4 *
5 *	Copyright (c) 2010 Cyokodog (http://d.hatena.ne.jp/cyokodog/)
6 *	Dual licensed under the MIT (MIT-LICENSE.txt)
7 *	and GPL (GPL-LICENSE.txt) licenses.
8 *
9 *	Built for jQuery library
10 *	http://jquery.com
11 *
12 */
13(function($){
14
15	var API = function(api){
16		var api = $(api),api0 = api[0];
17		for(var name in api0)
18			(function(name){
19				if($.isFunction( api0[name] ))
20					api[ name ] = (/^get[^a-z]/.test(name)) ?
21						function(){
22							return api0[name].apply(api0,arguments);
23						} : 
24						function(){
25							var arg = arguments;
26							api.each(function(idx){
27								var apix = api[idx];
28								apix[name].apply(apix,arg);
29							})
30							return api;
31						}
32			})(name);
33		return api;
34	}
35
36	var scrollEvent = function( target , config ){
37		var o = this;
38		if( typeof config == 'function') config = {
39			callback : config
40		}
41		var c = o.config = $.extend({},scrollEvent.defaults,config,{
42			target : target
43		});
44		c.status = 0;
45		c.scroll = o.getPos();
46		c.target.scroll(function( evt ){
47			if (o.isMove()) {
48				c.status = (c.status == 0 ? 1 : (c.status == 1 ? 2 : c.status) );
49				c.callback( evt , c );
50			}
51			if(c.tm) clearTimeout(c.tm);
52			c.tm = setTimeout(function(){
53				o.isMove();
54				c.status = 0;
55				c.callback( evt , c );
56			},c.delay);
57		});
58	}
59	$.extend(scrollEvent.prototype,{
60		isMove : function(){
61			var o = this, c = o.config;
62			var pos = o.getPos();
63			var scrollY = (pos.top != c.scroll.top);
64			var scrollX = (pos.left != c.scroll.left);
65			if(scrollY || scrollX){
66				c.scrollY = scrollY;
67				c.scrollX = scrollX;
68				c.prevScroll = c.scroll;
69				c.scroll = pos;
70				return true;
71			}
72			return false;
73		},
74		getPos : function(){
75			var o = this, c = o.config;
76			return {
77				top : c.target.scrollTop(),
78				left : c.target.scrollLeft()
79			}		
80		}
81	});
82	scrollEvent.defaults = {
83		delay : 100
84	}
85
86	$.ex = $.ex || {};
87
88	$.ex.fixed = function(idx , targets , option){
89		var o = this,
90		c = o.config = $.extend({} , $.ex.fixed.defaults , option);
91		c.targets = targets;
92		c.target = c.targets.eq(idx);
93		c.index = idx;
94
95		c = $.extend(c,{
96			_hidePos : false,
97			logicSize : {},
98			rowSize : {},
99			currentStyle : '',
100			style : '',
101			window : $(window),
102			oldBrowser : $.browser.msie && ($.browser.version < 7.0 || !$.boxModel)
103		});
104		c.dynamicMode = c.baseNode || !c.fixedX || !c.fixedY;
105
106		if (c.dynamicFixed || c.dynamicMode || c.oldBrowser){
107			$('body').append(c.target);
108		}
109
110		if (c.baseNode) c.baseNode = $(c.baseNode);
111		var size = o._cleanSize(c);
112
113		if (c.dynamicFixed) {
114			o._eachSizeSet(function(idx , at1 , cm1){
115				c.dynamicFixed = c.dynamicFixed && 
116					(size[at1.pos1] != undefined || size[at1.pos2] != undefined);
117			});
118		}
119
120		if (c.dynamicMode) c.dynamicFixed = true;
121		if (c.oldBrowser) o._padPos( size , o._cleanSize(c.target[0].currentStyle) );
122		else if (!c.dynamicFixed) {
123			c.target.css('position','fixed').css(size);
124			return;
125		}
126//		c.container = $.boxModel && !$.browser.opera ? $('html') : $('body');
127		c.container = $.boxModel ? $('html') : $('body');
128		c.container.height(); //for IE Bug
129
130		c.target.css('position',c.oldBrowser ? 'absolute' : 'fixed');
131//		if (c.oldBrowser && !/hidden|scroll/i.test(c.target.css('overflow'))) {
132		if (!/hidden|scroll/i.test(c.target.css('overflow'))) {
133			c.target.css('overflow','hidden');
134		}
135		o._smoothPatch();
136
137		o._fixed(size);
138
139		c.window.resize( function(){
140			if (c.oldBrowser || c.baseNode) {
141				o._fixed();
142			}
143		});
144
145		if (!(c.fixedX && c.fixedY)) {
146			if (c.oldBrowser) {
147				var tm;
148				c.window.scroll(function(){
149					if(tm) clearTimeout(tm);
150					tm = setTimeout(function(){
151						o._fixed();
152					},0);
153				});
154			}
155			else{
156				new scrollEvent(c.window,function( evt , pa ){
157					if ((pa.scrollX && !c.fixedX) || (pa.scrollY && !c.fixedY)) {
158						if (pa.status == 1) {
159							o._fixed(c.logicSize,{
160								unfixed:true
161							});
162						}
163						else
164						if (pa.status == 0) {
165							o._fixed();
166						}
167					}
168				})
169			}
170		}
171	}
172	$.extend($.ex.fixed.prototype, {
173		_attn :[
174			{size:'height',pos1:'top',pos2:'bottom'},
175			{size:'width',pos1:'left',pos2:'right'}
176		],
177		_camel :[
178			{size:'Height',pos1:'Top',pos2:'Bottom'},
179			{size:'Width',pos1:'Left',pos2:'Right'}
180		],
181		_smoothPatch : function(){
182			var o = this , c = o.config;
183			if( !c.oldBrowser ) return o;
184			$.ex.fixed.config.smoothPatched = true;
185			if(c.container.css('background-image') == 'none'){
186				c.container.css({'background-image':'url(null)'});
187			}
188			c.container.css({'background-attachment':'fixed'});
189			return o;
190		},
191		_eachSize : function( f ){
192			var o = this , c = o.config;
193			for (var i = 0; i < o._attn.length; i++) {
194				var attn = o._attn[i];
195				for (var j in attn) {
196					var name = attn[j];
197					f({
198						idx : i,
199						name : name,
200						camel : name.slice(0,1).toUpperCase() + name.slice(1)
201					});
202				}
203			}
204		},
205		_eachSizeSet : function( f ){
206			var o = this , c = o.config;
207			for (var i = 0; i < o._attn.length; i++) {
208				f( i , o._attn[i] , o._camel[i] , o._attn[1-i] , o._camel[1-i]);
209			}
210		},
211		_parseSize : function( val , xFlg ){
212			var o = this , c = o.config;
213			if( val == 'auto' ) return undefined;
214			if((val + '').indexOf('%') < 0) return parseInt(val) || 0;
215			var cSize = c.container.attr(xFlg ? 'clientWidth' : 'clientHeight');
216			return Math.round(cSize * parseInt(val) / 100);
217		},
218		_parseIntSize : function( val , xFlg ){
219			var o = this , c = o.config;
220			return parseInt( o._parseSize( val , xFlg ) ) || 0;
221		},
222		_cleanSize : function(size){
223			var o = this , c = o.config;
224			var ret = {};
225			o._eachSize( function( pa ){
226				if(/undefined|auto/i.test(size[pa.name])){
227					try{
228						delete size[pa.name];
229					}
230					catch(e){}
231				}
232				else{
233					ret[pa.name] = size[pa.name];
234				}
235			});
236			return ret;	
237		},
238		_padPos : function( size , pad ){
239			var o = this , c = o.config;
240			var pos;
241			o._eachSizeSet(function(idx , at1 , cm1){
242				if (size[at1.pos1] == undefined && size[at1.pos2] == undefined) {
243					if( (pos = pad[at1.pos1]) != undefined ) size[at1.pos1] = pos;
244					else if( (pos = pad[at1.pos2]) != undefined ) size[at1.pos2] = pos;
245					else size[at1.pos1] = 0;
246				}
247				if(size[at1.size] == undefined){
248					if((size[at1.size] = pad[at1.size]) == undefined){
249						size[at1.size] = c.target[at1.size]();
250					}
251				}
252			});
253			return size;
254		},
255		_calcRowSize : function( size , opt ){
256			var o = this , c = o.config;
257			var opt = $.extend({
258				abs : false,
259				base : c.baseNode,
260				unfixed : false
261			},opt);
262			var ret = {};
263			o._eachSize( function( pa ){
264				var val = size[pa.name];
265				if(!(/undefined/i.test( val ))){
266					ret[pa.name] = o._parseIntSize(val,/width|left|right/i.test(pa.name));
267					if (opt.abs && /top|left/i.test(pa.name)){
268						ret[pa.name] += c.window['scroll'+pa.camel]();
269					}
270				}
271			});
272			if(opt.base){
273				var basePos = c.baseNode.offset();
274				o._eachSizeSet( function(idx , pa , cm ){
275					basePos[pa.pos2] = c.container.attr('client'+cm.size)
276						- (basePos[pa.pos1] + c.baseNode['outer'+cm.size]());
277				});
278				o._eachSize( function( pa ){
279					if(!(/height|width/i.test(pa.name)) && ret[pa.name] == undefined
280						&& ((!pa.idx && c.baseY) || (pa.idx && c.baseX)) ){
281						var name = pa.name == 'top' ? 'bottom' : pa.name == 'bottom' ? 'top' : pa.name == 'left' ? 'right' : 'left';
282						ret[name] += basePos[name];
283					}
284				});
285			}
286			var fg = opt.unfixed && !c.fixedX ? -1 : 1;
287			if(fg == -1|| (!opt.unfixed && !c.fixedY)){
288				if(ret.top != undefined)ret.top -= (c.window.scrollTop()*fg);
289				if(ret.bottom != undefined)ret.bottom += (c.window.scrollTop()*fg);
290			}
291			var fg = !opt.unfixed && !c.fixedX ? -1 : 1;
292			if(fg == -1|| (opt.unfixed && !c.fixedY) ){
293				if(ret.left != undefined )ret.left += (c.window.scrollLeft()*fg);
294				if(ret.right != undefined )ret.right -= (c.window.scrollLeft()*fg);
295			}
296			return ret;
297		},
298		_fixed : function( size , opt ){
299			var o = this , c = o.config;
300			var opt = $.extend({
301				unfixed : false
302			},opt);
303			if(size) c.logicSize = o._padPos(o._cleanSize(size),c.logicSize);
304			if(!c.oldBrowser){
305				c.target.css( 
306					$.extend(
307						c.baseNode || !(c.fixedX && c.fixedY) ? o._calcRowSize( c.logicSize , opt ) : c.logicSize,
308						{position:opt.unfixed?'absolute':'fixed'}
309					)
310				);
311			}
312			else{
313				var rowSize = o._calcRowSize( c.logicSize );
314				var hide = false;

315				if (c.target.is(':hidden')) {
316					if (!c._hidePos) hide = true;
317					c.target.show();
318				}
319				c._hidePos = false;
320				o._eachSizeSet( function( idx , pa , cm ){
321					c.target.css( pa.size , rowSize[ pa.size ] );
322					var pos1 = rowSize[ pa.pos1 ];
323					if( pos1 == undefined ){ //right,bottom based
324						pos1 = c.container.attr( 'client' + cm.size ) - rowSize[ pa.pos2 ] - c.target[ 'outer' + cm.size ]();
325					}
326					var over = (pos1 + c.target['outer'+cm.size]()) - c.container.attr('client'+cm.size);
327					if (over > 0) {
328						over = c.target[pa.size]() - over;
329						if (over > 0) {
330							c.target[pa.size](over);
331						}
332						else {
333							if (!hide) c._hidePos = true;
334						}
335					}
336					if(!hide && !c._hidePos){
337						c.target[0].style.setExpression( pa.pos1 ,
338							pos1 +
339							(	(!idx && !c.fixedY) || (idx && !c.fixedX) ? 
340								c.window['scroll'+cm.pos1]() : 
341								'+eval(document.body.scroll'+cm.pos1+'||document.documentElement.scroll'+cm.pos1+')'
342							)
343						);
344					}
345				});
346				if(hide || c._hidePos) {
347					c.target.hide();
348				}
349			}
350		},
351		getTarget : function(){
352			return this.config.target;
353		},
354		fixedOpen : function( f ){
355			var o = this , c = o.config;
356			if (!c.dynamicFixed) return;
357			c.target.css(o.getFixedSize(c.logicSize));
358			if (c.oldBrowser) {
359				c.target[0].style.removeExpression('top');
360				c.target[0].style.removeExpression('left');
361			}
362			if( f ) setTimeout(function(){ // for window.scrollTop()
363				if (c.oldBrowser) {
364					c.target.css({top:'auto',left:'auto'});
365					c.target.css(o._calcRowSize(c.logicSize , {
366						abs : true
367					}));
368				}
369				f();
370			},100);
371			return o;
372		},
373		fixedClose : function( size ){
374			var o = this , c = o.config;
375			if (!c.dynamicFixed) return;
376			o._fixed( size );
377			return o;
378		},
379		getFixedSize : function( size ){
380			var o = this , c = o.config;
381			return o._calcRowSize(o._padPos(size,c.logicSize),{
382				abs : c.oldBrowser
383			});
384		},
385		resize : function( size ){
386			var o = this , c = o.config;
387			o.fixedOpen(function(){
388				o.fixedClose( size );
389			})	
390			return o;
391		}
392	});
393	$.ex.fixed.config = {
394		smoothPatched : false
395	};
396	$.ex.fixed.defaults = {
397	//	top : ,
398	//	right : ,
399	//	bottom : ,
400	//	left : ,
401	//	width : ,
402	//	height : ,
403		api : false,
404		dynamicFixed : false,		
405		baseNode : '',
406		baseX : true,
407		baseY : true,
408		fixedX : true,
409		fixedY : true
410	}
411	$.fn.exFixed = function(option){
412		var targets = this,api = [];
413		targets.each(function(idx) {
414			var target = targets.eq(idx);
415			var obj = target.data('ex-fixed') || new $.ex.fixed( idx , targets , option);
416			api.push(obj);
417			target.data('ex-fixed',obj);
418		});
419		return option && option.api ? API(api) : targets;
420	}
421})(jQuery);
422