まずは適用させたいCSSのクラスを用意します。このブログでは以下のクラスを対象にしました。
display:block;
width:100%;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.92, #2e90c5), color-stop(0.47, #2e90c5), color-stop(0.00, #68AFD5));
background: -webkit-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
background: -moz-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
background: -o-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
background: -ms-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
background: linear-gradient(to bottom, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
}
続いて、ポジションを切り替えるためのfixedクラスを用意しておきます。
position: fixed;
top: 0;
left: 0;
}
以下のJSソースを<head> ~ </head>に挿入します。
<script type="text/javascript">
$(function() {
var nav = $('固定したいクラス名');
var navTop = nav.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
nav.addClass('fixed')
} else if (winTop <= navTop) {
nav.removeClass('fixed')
}
});
});
</script>
このJavaScriptは簡単に言うと、スクロールイベントを取得して、固定したいクラスがウインドウTOPにきたときに<div class="dropdown_bg">を<div class="dropdown_bg fixed">に切り替えるというものです。汎用性もかなり高いので、いろんな形で使ってみてはどうでしょうか。