스크롤 시 윈도우 하단에 고정하기

 

조건

1. btn이 여러개 일 때 btn 클래스를 가진 요소가 모두 fix.
2. visual일 때는 btn이 보이지 않아야 한다.
3. resize에도 가능.

 

일단 코드!

<!-- 모든 html 동일 -->
<div id="wrap">
	<header>header</header>
    <section>
    	<div class="visual">visual</div>
        <div class="content cnt01">
            cnt01
            <span class="btn btn01"></span>
        </div>
        <div class="content cnt02">
            cnt02
            <span class="btn btn02"></span>
        </div>
        <div class="content cnt03">
            cnt02
            <span class="btn btn03"></span>
        </div>
    </section>
    <footer>footer</footer>
</div>

/* 모든 css 동일 */
* { margin: 0; padding: 0; box-sizing: border-box; }
.wrap { position: relative; width: 100%; height: 100%; }
header,
footer { width: 100%; height: 70px; position: relative; background-color: #eaeaea; }
footer { height: 200px; }

section { position: relative; }
.visual { width: 100%; height: calc(100vh - 70px); min-height: 600px; background-color: plum; }
.content { position: relative; width: 100%; height: 700px; background-color: powderblue; }
.cnt02 { background-color: palegreen; height: 1000px; }
.cnt03 { background-color: palevioletred; height: 600px; }

.btn { display: block; position: absolute; bottom: 0; right: 20px; z-index: 1; width: 50px; height: 50px; }
.btn01 {  background-color: tomato; }
.btn02 { border-radius: 50px; background-color: #222; }
.btn03 { background-color: gold; }

.sticky { position: fixed; opacity: 0.5; }

 

전에 참고로 만들었는데 다시 가져와서 했는데도 이해가 되지 않았다. 무엇보다 footer가 content의 높이가 변경되면 fix가 되지않아 높이의 수정에 유연하지 못했다.

// jQuery
$(function() {
    $(window).on('scroll', function() {
        var wTop = $(window).scrollTop();
        if(wTop < $(document).height() - $(window).height() - $('.cnt01').height() - $('.cnt02').height() ) {
            $('.btn01').addClass('sticky');
        } else {
            $('.btn01').removeClass('sticky');
        }
        
        if(wTop < $(document).height() - $(window).height() - $('footer').height() ) {
            $('.btn02').addClass('sticky');
        } else {
            $('.btn02').removeClass('sticky');
        }
    }).trigger('scroll');
})

 

다시 코드 작성.

// jQuery
function scrollSticky($fixed, $remove) {
    var _this = $($fixed).offset().top + $($fixed).height();
    var _remove = $($remove).offset().top + $($remove).height();
    
    $(window).on('scroll resize', function() {
        var wTop = $(window).scrollTop();
        var wH = $(window).height();
		
        // 조건1
        if(wTop + wH <= _this) {
            $($fixed).addClass('sticky');
        } else {
            $($fixed).removeClass('stikcy');
        }
        
        // 조건2
        if(wTop + wH <= _remove) {
            $($fixed).css({visibility: 'hidden'});
        } else {
            $($fixed).css({visibility: 'visible'});
        }
    }).trigger('scroll', 'resize');
}

scrollSticky('.btn01', '.visual');
scrollSticky('.btn02', '.visual');

위의 코드로 작동이 되지만 함수를 btn의 수만큼 불러야 한다.

 

 

다시 코드 정리 작성.

// jQuery
$(document).ready(function() {
    function eachSticky($fixed, $remove) {
        var _remove = $($remove).offset().top + $($remove).height();
        // 각각의 $fixed를 불러온다.
        $($fixed).each(function() {
            var _this = $(this);
            var _thisH = _this.offset().top + _this.height();

            $(window).on('scroll resize', function() {
                var wTop = $(window).scrollTop();
                var wH = $(window).height();

                // 조건1
                if(wTop + wH <= _thisH) {
                    _this.addClass('sticky');
                } else {
                    _this.removeClass('sticky');
                }

                // 조건2
                if(wTop + wH <= _remove) {
                    $($fixed).css({visibility: 'hidden'})
                } else {
                    $($fixed).css({visibility: 'visible'});
                }
            }).trigger('scroll', 'resize');
            
            // 한 번만 실행하려면 return false
            // return false;
        })
    }
    eachSticky('.btn', '.visual');  
})