アメブロのヘッダーバー。通称アメーババー。
デザイン的にはイケてないんですけどこれが無いとアメブロユーザーにとってはチト辛いです。
で、最初はこのヘッダーバーを隠しスクロールさせるとフェードインで表示させるスクリプトです。
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.7');
</script>
<script>(_JQ17_=jQuery)(function(){$=jQuery=_JQ17_;});</script>
<script>
$(function(){
$('ul#amebaBar').fadeOut();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('ul#amebaBar').fadeIn();
} else {
$('ul#amebaBar').fadeOut();
}
});
});
});
</script>
５行目まではアメブロでJQueryを使うためのおまじないです。既にJQueryを読み込んでいる方は省略可です。
どれくらいスクロールさせると表示されるかは１１行目の「$(this).scrollTop() > 50」で調節します。
「50」だと50pxスクロールさせたところでヘッダーバーがフェードインします。
JQueryのアニメーション効果はフェードイン・フェードアウトの他にもいろいろあるので調べてみるのも面白いかも？