2017-10-27
특정 위치에 있던 오브젝트가 스크롤에 따라서 같이 움직이다가, 다시 제자리를 찾는 기능을 본적이 있을 것이다.
일단 간단한 예제를 보자.
<script type="text/javascript" src="/post_inc/jquerys/sticky.js"></script>
<script>
	$(function(){
		$('#sticky_test').sticky({ topSpacing:100 });
	})
</script>

<div id="sticky_test">
	■■■■■■■■<br>
	b1ix_plugin_sticky<br>
	■■■■■■■■
</div>
■■■■■■■■
b1ix_plugin_sticky
■■■■■■■■
화면을 아래로 내리면 같이 따라가는 오브젝트를 볼 수 있을것이다.

해당 기능을 간단히 구현해 보면, 아래와 같다.
<div id="sticky_test2" style="position:block;">
	■■■■■■■■<br>
	b1ix_custom_sticky<br>
	■■■■■■■■
</div>

<script>
function stiky_custom(id)
{
	var tid = $(id)
	var tid_t = tid.offset().top
	var window_t = $(window).scrollTop()
	// console.log(tid_t, window_t)

	if( origin_val.top <= window_t )
	{
		tid.css('position', 'fixed').css('top',0).css('width','100%')
	}
	else
	{
		tid.css('position', origin_val.position).css('top',origin_val.top)
	}
}

var sticky_id = '#sticky_test2'
var sticky_id_d = $(sticky_id)
var origin_val = {}
origin_val.top = $(sticky_id).offset().top
origin_val.position = $(sticky_id).css('position')

$(window).scroll(function(){
	stiky_custom(sticky_id)
})
</script>
■■■■■■■■
b1ix_custom_sticky
■■■■■■■■
해당 오브젝트의 현재 위치와 window스크롤의 위치를 비교하여, 해당 오브젝트를 fixed로 바꿨다가 다시 원래대로 돌리는 방식을 이용한 구현이다.
참고로 해당 기능은 position:fixed와 $(window).scroll에 기반을 두는 기능이기 때문에, 모바일에서는 제대로 동작 하지 않을 수 있으니 주의하기 바란다.

해당 기능을 이용한 플러그인은 매우 많은데, 기본적인 고정 기능부터, 상대적인 고정 기능이나 각종 효과를 대입한 기능들까지 많은 기능들이 존재한다.

링크1: http://imakewebthings.com/waypoints/

링크2: https://github.com/leafo/sticky-kit
- 해당 오브젝트가 속한 태그 안에서만 sticky를 구현시켜준다.

링크3: http://stickyjs.com/
- 가장 기본적인 sticky를 구현해놓은 플러그인이다.

링크4: http://wicky.nillia.ms/headroom.js/

링크5: https://github.com/guimadaleno/makefixed.js
- 간단한 소스와, callback을 통해서 쉽게 제어 할 수 있게 되어 있는 플러그인이다

링크6: http://aerolab.github.io/midnight.js/
- 오브젝트의 경계를 체크 가능하다는 점을 이용하여, 오브젝트의 경계에 따라 다른 효과를 주는 플러그인이다.
- 해당 기능 하나만 가지고도 개성 강한 홈페이지 제작이 가능하다.

링크7: http://scrollmagic.io/
- 스크롤의 위치에 따라서 각종 이벤트를 발생 시킬 수 있다.
- 이 기능 역시 개성 강한 홈페이지 제작에 유용하다.

링크8: http://silvestreh.github.io/onScreen/

링크9: http://webpop.github.io/jquery.pin/
- sticky-kit과 비슷한 효과를 낼 수 있다.

링크10: https://github.com/yairEO/stickyfloat
- jquery의 easing효과와 animate() 기능을 이용하여 만들어진 플러그인이다.

링크11: https://github.com/stefangabos/Zebra_Pin
- 기본적인 sticky 기능을 구현해놓은 플러그인이다.

링크12: https://github.com/somewebmedia/hc-sticky

링크13: http://mojotech.github.io/stickymojo/

링크14: http://www.jozefbutko.com/stickynavbar/

링크15: https://github.com/mike-zarandona/StickyStack.js
- 화면 구성을 마치, 스택이 하나하나 쌓이듯이 구현 할 수 있게 해준다.
- 포트폴리오를 만들때 사용하면 좋을 것이다.