[JQUERY] footer/div 하단 고정 (스크롤바 이동시 동적으로 변경)

 

footer 하단고정 예제

---

 

HTML

---

<footer>
     <span>하단 필요내용을 입력</span>
</footer>

 

 

CSS

---

footer {
	position: fixed;
	z-index: 30; <!-- 다른 div나 항목들에 비해 앞쪽으로 -->
}

 

 

SCRIPT

<script type="text/javascript">

	$(function(){
		stickyFooter();

		$(window).scroll(stickyFooter).resize(stickyFooter);
	});


	function stickyFooter(){
		document_height = $(document).height(); // 문서 전체 높이
		document_scrollTop = $(document).scrollTop(); // 문서 전체 높이 중 스크롤 위치
		window_height = $(window).height(); // 창 높이
		footer_height = $("footer").height();

		gap = document_height - footer_height - window_height; 
		bottom = document_scrollTop - gap ; 

		if(document_scrollTop > gap){
			$("footer").css("bottom", bottom+"px");
		}else{
			$("footer").css("bottom","0");
		}
	}

</script>