変化するスティツキーヘッダー
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
jqueryのCDN jquery-3.7.1.min.js及び、 modernizr.min.js
【スティツキーヘッダーの概要】
・デザイン
スティツキーヘッダーは上部に達すると
【仕組み】
今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。
1.初期状態のヘッダーは動かさず、常に元の位置に配置する
2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく
3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する
【フォルダーの構成】
imgフォルダー
【HTMLコード】
【head部】
1.Google Fonts の「Ropa Sans」フォントを取得している。 ＜link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ropa+Sans"＞
2.modernizr2.6.2のCDN
3.jQuery throttle / debounceのプラグインとは、イベント中の処理回数を減らすプラグイン。
＜script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"＞＜/script＞
【CSSフォルダー】-------------------------------------------------------------
1.normalize.cssはここでは省略
2.main.cssファイルにコードを書く
@charset "UTF-8";//フォント設定
/* Base */
html { "Ropa Sans", sans-serif; font-size: 16px; line-height: 1.5; }
body {
background-color: rgb(223, 235, 241);
color: rgb(0, 0, 0);
min-width: 960px; //960px以下にはしない
}
h1, h2, h3, p, ul {
margin: 0;
}
ul {
padding-left: 0;
}
ul li {
}
a {
}
img {
/*選択した要素の中心を親要素の縦の位置の中心に合わせる*/
}
.clearfix:before, .clearfix:after {
content: " ";
}
.clearfix:after {
}
.dummy {
margin: 0 auto;
max-width: 32em;
padding: 2em 0;
}
/*自分で書いたもの*/
.test {
min-width: 960px;
background-color:beige;
}
/*
* Sticky header
*/
.page-header {
background-color: rgb(255, 255, 255);
width: 100%;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.no-boxshadow .page-header {
border-bottom: 1px solid rgb(204, 204, 204);
}
.page-header > .inner {
margin: auto;
width: 960px;
}
/* Logo */
site-logo {
font-size: 100%;
margin-left: -20px;
}
/* Primary nav */
.primary-nav {
float: right;
line-height: 65px;
letter-spacing: 1px;
text-transform: uppercase;
}
.primary-nav li {
float: left;
}
.primary-nav a {
display: block;
padding: 0 1.36em;
}
.primary-nav a:hover {
background-color: rgb(240, 240, 240);
}
/* Sticky header (clone) */
.page-header-clone {
background-color: rgb(0, 0, 0);
opacity: 0.9;
position: fixed;
top: -35px;
width: 100%;
/*z-index: 30;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
/*何かの要素に影をつけたいとき*/
-webkit-transition: top 0.25s;
/*スティッキヘッダーを別の物に変える時間*/
}
/*親要素の最初の子要素*/
.page-header-clone > .inner {
margin: auto;
width: 960px;
}
/*visibleはjsの中で使われる*/
.page-header-clone .visible {
top: 0;
}
.page-header-clone:hover {
/*透過度には、0〜1の範囲で値を入れます*/
}
/*一般的にウェブサイトのロゴ*/
site-logo .page-header-clone {
margin-left: 8px;
}
site-logo .page-header-clone a {
display: block;
width: 143px;
height: 32px;
overflow: hidden;
}
site-logo .page-header-clone a:before {
content: url(../img/logo-small.png);
display: inline-block;
}
.page-header-clone .primary-nav {
font-size: 14px;
line-height: 35px;
}
.page-header-clone .primary-nav a {
color: rgb(128, 128, 128);
}
実際のコードでは、site-logoに、クラスを意味する「.」を付ける
【JSフォルダー】------------------------------------
main.jsファイルにコードを書く
$(function () {
/*
*スティッキーヘッド部
*/
$('.page-header').each(function () { //--------------繰り返し関数
/*Jquery変数に代入する事で、Jqueryでも扱える用になる*/
$header = $(this), // page-headerクラスをjQury化する
// ヘッダーのクローン-------------------------
/*
*contents()でheaderの子要素をすべて選択し、cloneメソッドで複製し、jQury変数に入れる。
*/
// ヘッダーのクローンのコンテナー
//page-header-cloneクラスを生成し、jQury変数に入れる。
$headerCloneContainer = $('＜div class="page-header-clone"＞＜/div＞'),
/* HTML の上辺からヘッダーの底辺までの距離 =
ヘッダーのトップ位置 +ヘッダーの高さ*/
// コンテナーにヘッダーのクローンを挿入
//append()は、引数にしてされた要素をjqueryオブジェクトに挿入する
$headerCloneContainer.
append($headerClone);
// コンテナーを body の最後に挿入
//appendTo()は、引数に追加する親要素を書く。
/* スロットリング（プラグイン）----------------------
*スクロール時に処理を実行するが、 回数を 1 秒間あたり 15 までに制限。
*$.throttle(delay, callback) は、指定した時間 (delay ミリ秒) に1回だけ
*callbackを実行する関数です。1/15秒毎に、コールバック関数 を実行する。
*/
$window.
on('scroll', $.
throttle(1000 / 15, function () {
if ($window.scrollTop() > threshold) {
$headerCloneContainer.addClass('visible');
} else {
$headerCloneContainer.removeClass('visible');
}
}));
// スクロールイベントを発生させ、初期位置を決定
$window.trigger('scroll');
});
});
