페이지 바닥글의 고정 개체 수정

바닥글 위로 스크롤되는 고정 개체의 일반적인 문제는 간단한 해결책을 제공합니다. 예를 들어, 화면 왼쪽 하단에 고정된 "공유" 상자가 있다고 가정해 보겠습니다. 바닥글과 겹치는 것을 방지하기 위해 바닥글 위 약 10px에서 중지하겠습니다.

먼저 페이지를 스크롤할 때마다 바닥글에 대한 상자의 근접성을 결정해야 합니다.

$(document).scroll(function() {
    checkOffset();
});

상자가 바닥글에 너무 가까워지면(예: 10px 이내) 위치를 절대 위치로 변경합니다.

function checkOffset() {
    if($('#social-float').offset().top   $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop()   window.innerHeight 
#social-float의 부모는 HTML 구조에서 바닥글의 형제여야 합니다.