[jQuery] 스크롤하면 상단 고정(스크롤 고정 메뉴)

어느 블로그나 홈페이지를 들어가면 

상단 영역이라던가 상단 메뉴부분이 스크롤시 상단에 붙어 있는듯한 UI를 많이 보았을 것입니다.

그 기능은 CSS 와 j-Query 를 이용하여 구현해 보았습니다.

제가 만든 소스를 그대로 사용하시기 보다는 좀더 보안하여 응용형식으로 사용되었음 좋을 것 같습니다.

HTML

 
<div class="wrap">
            
    <div class="top_bn_zone">
        상단 배녀 영역
    </div>
 
    <div class="top_fix_zone" id="topBar">
        상단 고정 영역
    </div>
 
    <div class="top_con_zone" id="fixNextTag">
        하단 contents 영역
    </div>
 
</div>
 

CSS

.wrap{}
.wrap div{width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff;}

.top_bar_fix{position:fixed; top:0; left:0; width:100%;}
.pd_top_80{padding-top:80px;}

.wrap .top_bn_zone{height:100px; background:#777; line-height:100px;}
.wrap .top_fix_zone{height:80px; background:#d63232; line-height:80px;}
.wrap .top_con_zone{height:1500px; background:#ededed; color:#888; text-align:center; font-size:70px;}
 

JAVASCRIPT

 
$(document).ready(function(){
 
    var topBar = $("#topBar").offset();
 
    $(window).scroll(function(){
        
        var docScrollY = $(document).scrollTop()
        var barThis = $("#topBar")
        var fixNext = $("#fixNextTag")
 
        if( docScrollY > topBar.top ) {
            barThis.addClass("top_bar_fix");
            fixNext.addClass("pd_top_80");
        }else{
            barThis.removeClass("top_bar_fix");
            fixNext.removeClass("pd_top_80");
        }
 
    });
 
})
 

스크롤하면 상단 영역 고정.html

위의 파일을 참고하시기 바랍니다~