반응형
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>
반응형
'JSP > JQUERY' 카테고리의 다른 글
[JQUERY] 화면상의 항목 전체 확인 (0) | 2019.11.19 |
---|---|
[JQUERY] 테이블 마우스오버 컬러표시 (0) | 2019.11.19 |
[JQUERY] 테이블 td 병합 (rowspan) (0) | 2019.11.19 |
[JQUERY] INPUT 합계 구하기 (0) | 2019.11.19 |
[JQUERY] .attr() .prop() 차이 (0) | 2019.11.19 |