jquery scroll() 이벤트 이용한 GNB 메뉴 처리

index.html

<style>
#laout-box {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}
#laout-box img{
    position: relative;
    float:right;
}
#laout-box .mover {
    position: fixed;
    top: 0px;
    left: 0px;
    background: blue;
    padding: 10px;
    color: white;
    z-index: 999;
    width: 100%;
}
</style>
<div id="laout-box">
    <div class="mover">mover</div>
    <img src="http://javascript-reference.info/JavaScript-Reference-Dateien/jsNumber.gif">
</div>

jquery-scroll.js

$(function () {
    var _lastScroll = 0,
        _intDelta = 0;
    $("#laout-box").scroll(function (event) {
        var intDelta = _lastScroll - $(this).scrollTop(); 	// 이동방향을 나타낸다
        if (0 > (_intDelta ^ intDelta)) { 			// (_intDelta ^ intDelta) 값이 음수로 나올경우 이동방향이 바뀌었다는 표시.
            console.log("scrollTop = " + $(this).scrollTop() + ", _intDelta=" + _intDelta + ", intDelta=" + intDelta);
            if (_lastScroll > $(this).scrollTop()) {

                $("#laout-box .mover").dequeue().stop().animate({
                    "top": "0px"
                }, 500);
            } else if (_lastScroll < $(this).scrollTop()) {
                $("#laout-box .mover").dequeue().stop().animate({
                    "top": "-80px"
                }, 500);
            }
        }
        _lastScroll = $(this).scrollTop();
        _intDelta = intDelta;
    });
});

Jquery scroll() 이용방법

mousewheel 플러그인을 대신하여 scroll() 이벤트 상,하 이벤트를 캐치해서 처리하는 방법.
mouse wheel 경우 입력이 한번에 대량 유입되기 때문에 같은 방향으로 이벤트가 계속 발생할 경우를 대비해 제일 처음 발생한 이벤트에 대해서만 처리, 방향이 바뀌기 전까진 호출하지 않는다. (line 6. 참조)