いわゆるスティッキーヘッダー
スティッキーなヘッダーを作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(function () { $('#header').each(function () { var $window = $(window), // Window オブジェクト $header = $(this), // ヘッダー // ヘッダーのクローン $headerClone = $header.contents().clone(), // ヘッダーのクローンのコンテナー $headerCloneContainer = $('<div id="sticky-header"></div>'), // HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ threshold = $header.offset().top + $header.outerHeight(); // コンテナーにヘッダーのクローンを挿入 $headerCloneContainer.append($headerClone); // コンテナーを body の最後に挿入 $headerCloneContainer.appendTo('body'); $window.on('scroll', function () { if ($window.scrollTop() > threshold) { $headerCloneContainer.addClass('visible'); } else { $headerCloneContainer.removeClass('visible'); } }); // スクロールイベントを発生させ、初期位置を決定 $window.trigger('scroll'); }); }); |
これは本を参考にした。でもね、スティッキーではロゴ画像を変えたかったんだな。これって以外と単純な方法でできるんやんね。つ…