1
2
3
4
5
6

<div class="container">
    <div class="bottom_sticky">
        이 요소는 컨테이너 내에서만 하단에 고정됩니다!
    </div>
</div>
<footer></footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.container { 
    position: relative; 
    min-height: 150vh; 
    border: 2px solid #ddd; 
    margin: 20px auto; 
    max-width: 800px; 
    overflow: hidden; 
}
.bottom_sticky { 
    position: fixed; 
    right: 0; 
    bottom: 30px; 
    left: 50%; 
    width: 500px;
    height: 60px; 
    max-width:100%;
    transform: translate(-50%,0);
    background: #007bff; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    z-index: 100; 
}
footer { 
    height: 80px; 
    background: #333; 
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

// 하단 플로팅 배너 초기화 함수
function initBottomSticky() {
    const $apply = $('.bottom_sticky');
    const $wrap = $('.container');
    let rafId = null;
    
    // 플로팅 배너의 위치를 업데이트하는 함수
    function updatePosition() {
        if ($apply.length && $wrap.length) {
            const wrapOffset = $wrap.offset().top;
            const wrapHeight = $wrap.outerHeight();
            const scrollPosition = $(window).scrollTop();
            const windowHeight = window.innerHeight;
            const wrapBottom = wrapOffset + wrapHeight;
            const currentBottom = scrollPosition + windowHeight;
            
            // 컨테이너 영역에 따라 position 속성 변경
            const cssProperties = {
                'position': currentBottom >= wrapBottom ? 'absolute' : 'fixed',
            };
            $apply.css(cssProperties);
        }
    }
    
    // 컨테이너에 패딩을 추가하는 함수
    function updatePadding() {
        if ($apply.length && $wrap.length) {
            const windowWidth = $(window).width();
            const paddingValue = windowWidth >= 768 ? 80 : 40;
            const applyHeight = $apply.outerHeight() + paddingValue;
            $wrap.css('padding-bottom', applyHeight + 'px');
        }
    }
    
    // 성능 최적화된 스크롤 업데이트 함수
    function optimizedUpdate() {
        if (rafId) {
            cancelAnimationFrame(rafId);
        }
        rafId = requestAnimationFrame(updatePosition);
    }
    
    // 스크롤 이벤트 (requestAnimationFrame으로 최적화)
    $(window).on('scroll', optimizedUpdate);
    
    // 리사이즈 이벤트
    $(window).on('resize', function() {
        updatePadding();
        updatePosition();
    });

    // 페이지 로드 이벤트
    $(window).on('load', function() {
        updatePadding();
        updatePosition();
    });
}

// DOM 준비 완료 후 실행
$(document).ready(function() {
    initBottomSticky();
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

function updatePosition() {
    if ($apply.length && $wrap.length) {
        const wrapOffset = $wrap.offset().top; // 컨테이너 상단 위치
        const wrapHeight = $wrap.outerHeight(); // 컨테이너 높이
        const scrollPosition = $(window).scrollTop(); // 현재 스크롤 위치
        const windowHeight = window.innerHeight; // 뷰포트 높이
        const wrapBottom = wrapOffset + wrapHeight; // 컨테이너 하단 위치
        const currentBottom = scrollPosition + windowHeight; // 뷰포트 하단 위치
        
        // 컨테이너 영역에 따라 position 속성 변경
        const cssProperties = {
            'position': currentBottom >= wrapBottom ? 'absolute' : 'fixed',
        };
        $apply.css(cssProperties);
    }
}

1
2
3
4
5
6
7
8

function updatePadding() {
    if ($apply.length && $wrap.length) {
        const windowWidth = $(window).width();
        const paddingValue = windowWidth >= 768 ? 80 : 40; // 데스크톱/모바일 구분
        const applyHeight = $apply.outerHeight() + paddingValue;
        $wrap.css('padding-bottom', applyHeight + 'px');
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 성능 최적화된 스크롤 업데이트 함수
function optimizedUpdate() {
    if (rafId) {
        cancelAnimationFrame(rafId);
    }
    rafId = requestAnimationFrame(updatePosition);
}

// 스크롤 이벤트 (requestAnimationFrame으로 최적화)
$(window).on('scroll', optimizedUpdate);