当サイトの右側に出てくるナビゲーションのように、一定量以上スクロールしたときに出てくるナビゲーションを作るための記述です。
（ナビゲーションでない要素にも適用はできます。）
【javascriptの記述】
下記の記述をhtmlのヘッド要素内に記述します。
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1.4”);</script>
<script type=”text/javascript”>
$(function() {
$(window).scroll(function () {
var s = $(this).scrollTop();
var m = 300;
if(s > m) {
$(“#sub_nav“).fadeIn(‘slow’);
} else if(s < m) {
$(“#sub_nav“).fadeOut(‘slow’);
}
});
});
</script>
赤字部分で出現させる要素のID名を指定します。
青字部分でスクロールさせる量の指定を行います。
【cssの記述】
#sub_nav {
display: none;
}
初期の設定としてdisplay: noneを指定し、非表示にしておきます。
この記述が無いとページが読み込まれた時から表示されてしまいます。
