jQuery
ナビ:上部固定
★スクロールしてナビ要素を越えると上部に固定
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; }