ナビ：上部固定滋賀県守山市のホームページ制作

★スクロールしてナビ要素を越えると上部に固定
HTML

<nav id="globalNav">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">会社案内</a></li>
            <li><a href="#">事業案内</a></li>
            <li><a href="#">導入事例</a></li>
            <li><a href="#">採用情報</a></li>
        </ul>
    </div>
</nav>
<!-- /ID globalNav -->

JS

<script>
$(function() {
	var nav = $('#globalNav');
	var navTop = nav.offset().top;
	$(window).scroll(function () {
		var winTop = $(this).scrollTop();
		if (winTop >= navTop) {
			nav.addClass('fixed').css('top',0);
		} else if (winTop < navTop) {
			nav.removeClass('fixed').css('top',-navTop+'px');
		}
	});
});
</script>

CSS

.fixed{
	position:fixed;
}

#globalNav {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 127px;
	text-align: center;
	background: #E1E1E1;
}
 
#globalNav ul {
    display: block;
    margin: 0 auto;
    padding: 0;
	 width: 1000px;
	 height: 127px;
    list-style: none;
	 border-left: 2px solid #FFF;
}
 
#globalNav li {
    display: inline;
}
 
#globalNav li a {
    display: block;
    margin: 0;
    padding: 30px 0;
    width: 198px;
	 height: 67px;
    float: left;
    text-align: center;
    list-style: none;
    background: #EEE;
    border-right: 2px solid #FFF;
    color: #333;
    letter-spacing: 0.1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#globalNav li a:hover {
	background: #063;
	color: #FFF;
}

サンプル
アレンジ