scrollTop 이벤트

스크롤 따라다니는 메뉴

01. CSS

/* CSS 는 입맛에 맞게 변경 */
html, body {height: 100%;}
#wrap {text-align:center; height:100%}
header {background:orange; box-shadow: 0px 5px 10px -5px; position:relative;}
header li {display:inline-block;}
header li a {display:block; padding:20px;}
header.fixd {position:fixed; top:0; width: calc(100% - 15px);} 
section {background:orchid; min-height:100%; padding:150px 0 150px}
footer {background:blanchedalmond; margin-top:20px; padding:20px; }

02. HTML 

<div id="wrap">
    <header>
        <ul>
            <li><a href="#none">MENU1</a></li>
            <li><a href="#none">MENU2</a></li>
            <li><a href="#none">MENU3</a></li>
            <li><a href="#none">MENU4</a></li>
        </ul>
    </header>
    <section>container</section>
    <footer>footer</footer>
</div>

03 . jQuery

$(function(){
    var num = 30; // 상단 높이 fixed 가 시작되는 좌표값 
 
    $(document).scroll(function(){
        var scroll_height = $(document).scrollTop(); // 스크롤높이값
        if(num <= scroll_height){ // 시작되는 좌표값 보다 스크롤 높이값이 크거나 같으면
            $("header").addClass("fixd"); // addClass fixd
        }else{
            $("header").removeClass("fixd"); // 그렇지 않으면 removeClass fixd 
        }
        console.log(scroll_height)
    });
})

jQuery Scroll Top menu. 

상단에 고정해서 따라다니는 메뉴 ...

CSS는 변경해서 사용...