테스트 사이트 - 개발 중인 베타 버전입니다

고정된 푸터 밑 여백 채택완료

TECK 6년 전 조회 2,339

안녕하세요.

하단푸터가 position:fixed; bottom: 0;으로 고정되어 있는 상태인데요.

스크롤을 화면 끝까지 내렸을 때 푸터 밑에 이미지가 하나 뜨게하고 싶은데

좋은 방법 있을까요? 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

</p>

<p><script>

var curSc =0, wh =0, imgH=0, ft=0, hap = 0;

$(document).scroll(function() {

    curSc = $(document).scrollTop() + $(window).height();    //현재 스크롤 높이

    ft = $("#푸터아이디").height();    //푸터높이

    wh = $(document).height();    //전체높이

    imgH = $("#이미지아이디").height();    //이미지 높이

    hap = curSc + ft;

    cha = hap-wh;

    if(hap > wh){    //합이 전체높이보다 크면 그차이만큼 bottom 값 변경해줌 

        $("#푸터아이디").attr('style','position:fixed; bottom :'+ cha + 'px');

    }

    

})</p>

<p></script></p>

<p>

방금 만들어서 해봤는데 잘되네요

cha값만 상황에 맞게 조정해주면 될것 같습니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

T
TECK
6년 전
답변 감사합니다! 이미지도 잘 나오네요ㅎ 그런데 다시 스크롤해서 창을 올리면 푸터가 bottom:0이 되지 않고 밑 여백이 생깁니다~ 혹시 방법 있을까요?

댓글을 작성하려면 로그인이 필요합니다.

    if(hap > wh){    //합이 전체높이보다 크면 그차이만큼 bottom 값 변경해줌 
        $("#푸터아이디").attr('style','position:fixed; bottom :'+ cha + 'px');
    }else{
        $("#푸터아이디").attr('style','position:fixed; bottom : 0px ');
    }

 

이렇게 바꾸면 될것 같습니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

T
TECK
6년 전
정말 감사합니다! 해결 됐습니다ㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인