고정 개체가 바닥글과 겹치는 것을 방지하는 방법은 무엇입니까?

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

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

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

$(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 < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

#social-float의 부모는 HTML 구조에서 바닥글의 형제입니다.

위 내용은 고정 개체가 바닥글과 겹치는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!