コント：ギャルは歌でスライドダウンを流行らせる

※コードは下部へ

コード解説編

CSS

#wrapper{
position: fixed;
width: 100%;
z-index: 10;
top: 0;
transition: 0.5s;
background: #fff;
}

CSSでの鍵は position: fixed;にしておくことです。動作に関してはJavascriptで行うので、その際の表示もトップに常に来るようにfixedでtop:0;にしておきます。後は動きのスムーズさをつけるためのtransitionを加えています。前面に来るようにz-indexも加えておきましょう。

JavaScript

let start_position = 0, //初期位置０でヘッダーを規定
window_position,
$window = $(window),
$header = $(‘#wrapper’);

// スクロールイベントを設定
$window.on( ‘scroll’ , function(){
// スクロール量の取得
window_position = $(this).scrollTop();

// スクロール量が初期位置より小さければ，
// 上にスクロールしているのでヘッダーを出現
if (window_position <= start_position) {
$header.css(‘top’,’0′);
} else {
$header.css(‘top’,’-230px’);
}
// 現在位置を取得
start_position = window_position;

});
// 途中でロードされても良スクロールイベントを発生
$window.trigger(‘scroll’);

JavaScriptでは、まずヘッダーの初期位置を取得させ、スクロール量をウォッチ。スクロールが初期値より低ければ、cssをtopへと操作します。その他の場合には上に消し去るように-の値を設定しておきます。ここはヘッダーのheight以上で良きところにしておいてください。