[jQuery] 스크롤하면 고정되는 메뉴 제이쿼리 [펌] > 팁앤테크

• 목록

• 페이스북 공유
• 트위터 공유
• 

<style type="text/css">
.nav-container {background:url('images/nav_bg.jpg') repeat-x 0 0;}
.f-nav {z-index:9999; position:fixed; left:0; top:0; width:100%;}
     
.nav {height:42px;}
.nav ul {list-style:none;}
.nav ul li {float:left; margin-top:6px; padding:6px; border-right:1px solid #ACACAC;}
.nav ul li:first-child {padding-left:0;}
.nav ul li a:hover {text-decoration: underline;}
</style>

<div class="nav-container">
    <div class="nav">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">CSS</a></li>
            <li><a href="">PHP</a></li>
            <li><a href="">SEO</a></li>
            <li><a href="">jQuery</a></li>
            <li><a href="">Wordpress</a></li>
            <li><a href="">Services</a></li>
        </ul>
        <div class="clear"></div> /*clear floating div*/
    </div>
</div>

<script>
var nav = $('.nav-container');
 
$(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});
</script>