https://giview.co.kr/data/skin/layout/1/m20/images/js/fixedScroll.js

1var	topLastScroll = 0;
2var	nowScroll = 0;
3
4function onScrollPos(){
5	var function_direction	= function(){
6		var top_scroll = jQuery11(document).scrollTop();
7		window.nowScroll = top_scroll - window.topLastScroll;
8		window.topLastScroll = top_scroll;
9
10		jQuery11(window).trigger("layoutPos");
11	};
12
13	jQuery11(window).scroll(function_direction);
14	jQuery11(window).resize(function_direction);
15
16	setTimeout(function(){window.nowScroll=-1;jQuery11(window).trigger("layoutPos");}, 200);
17};
18
19function layoutPos(posSrt, posEnd, posNow, mSet){
20	jQuery11(window).on('layoutPos', function(){
21		var	conSrt = jQuery11(posSrt);
22		var	conEnd = jQuery11(posEnd);
23		var	conIn = jQuery11(posNow);
24		var cMargin = mSet;
25		
26		if (conSrt && conEnd && conIn){
27			var	topNow = conIn.offset().top;
28			var	topWin = jQuery11(document).scrollTop();
29			var	topSrt = conSrt.offset().top - 20;
30			var	topEnd = conEnd.offset().top;
31			var	lftSrt = conSrt.offset().left;
32			var	widSrt = conSrt.width();
33			var	heiWin = jQuery11(window).height();
34			var	heiEnd = conEnd.height();
35			var	heiNow = conIn.height();
36			var	botWin = topWin + heiWin;
37			var	botEnd = topEnd + heiEnd;
38			var	botNow = topNow + heiNow;
39			
40			var	posTop = topEnd + heiEnd - topSrt - heiNow - cMargin;
41			
42			conSrt.css({
43				'height': heiNow + 'px'
44			});
45			
46			if (window.nowScroll == 0){
47				if ( conIn.css('position') == 'fixed' ){
48					conIn.css({
49						'left': lftSrt + 'px'
50					});
51				}
52			}
53			
54			if (heiNow >= botEnd - topSrt){
55				conIn.css({
56					'position':	'relative',
57					'top': 		'0px',
58					'left':		'0px',
59					'width':	'inherit'
60				});
61			}
62			else if (heiWin > topEnd + heiEnd - topSrt){
63				conIn.css({
64					'position':	'relative',
65					'top': 		'0px',
66					'left':		'0px',
67					'width':	'inherit'
68				});
69			}					
70			else if (heiWin > heiNow){
71				if (topSrt >= topWin){
72					conIn.css({
73						'position':	'relative',
74						'top': 		'0px',
75						'left':		'0px',
76						'width':		'inherit'
77					});
78				}
79				else if (topSrt + posTop <= topWin){
80					conIn.css({
81						'position':	'relative',
82						'top':		posTop + 'px',
83						'left':		'0px',
84						'width':	'inherit'
85					});
86				}						
87				else {
88					conIn.css({
89						'position':	'fixed',
90						'top': 		cMargin + 'px',
91						'left':		lftSrt + 'px',
92						'width':	widSrt + 'px'
93					});
94				}
95			}
96			else {
97				if ( window.nowScroll < 0 ){
98					if ( topSrt >= topWin ) {
99						conIn.css({
100							'position':	'relative',
101							'top': '0px',
102							'left':'0px',
103							'width':'inherit'
104						});
105					}
106					else if ( topNow >= topWin ) {
107						conIn.css({
108							'position': 'fixed',
109							'top': 		cMargin + 'px',
110							'left':		lftSrt + 'px',
111							'width':	widSrt + 'px'
112						});
113					}
114					else if ( conIn.attr('data-direction') == 'down' && conIn.css('position') == 'fixed' ) {
115						conIn.css({
116							'position':	'relative',
117							'top':		(topNow-topSrt-nowScroll) + 'px',
118							'left':		'0px',
119							'width':	'inherit'
120						});
121					}
122					conIn.attr('data-direction', 'up');
123				}
124				
125				if ( window.nowScroll > 0 ){
126					if ( botEnd <= botWin ){
127						conIn.css({
128							'position':	'relative',
129							'top':		posTop + 'px',
130							'left':		'0px',
131							'width':	'inherit'
132						});
133					}
134					else if ( botNow <= botWin ){
135						conIn.css({
136							'position':	'fixed',
137							'top':		(heiWin-heiNow) + 'px',
138							'left':		lftSrt + 'px',
139							'width':	widSrt + 'px'
140						});
141					}
142					else if ( conIn.attr('data-direction') == 'up' && conIn.css('position') == 'fixed' ){
143						conIn.css({
144							'position':	'relative',
145							'top':		(topNow-topSrt-nowScroll) + 'px',
146							'left':		'0px',
147							'width':	'inherit'
148						});
149					}
150					conIn.attr('data-direction', 'down');
151				}
152			}
153		}
154	});
155};