【初心者向け】スクロールすると透過するヘッダーをjQueryで作成

パソコンweb制作
マークアップ、プログラミング
妹_右向き
いもうと

まだまだweb制作勉強中、妹です!

jQueryって、JavaScriptを分かりやすくするとはいえ、htmlやcssに比べると格段にレベルが上がりますよね…。一つの動作を作成するだけで一苦労です…。笑

今回は、スクロールすると透過するヘッダーを実行出来たので、備忘録として書いていきます…!

動作の確認

次項のソースコードでの実際の動作はこちら↓

ソースコード

ソースコードは下記の通りです。(jQueryを取り込み済み前提で説明していきます。)

/*html*/
<header>
<h1>ヘッダー</h1>
</header>
<section>
<h2>メイン</h2>
<p>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p>
</section>
/*css*/
header {
background-color: skyblue;
width: 100%;
height: 100px;
position: fixed; /*ヘッダーを固定*/
z-index: 1;
}

section {
background-color: tomato;
width: 100%;
position: absolute;
top: 100px;
}
/*Java Script (jQuery)*/
$(function () {
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$('header').css('opacity', 0.7);
} else {
$('header').css('opacity', 1);
}
});
});

コードの解説

jQuery部分を一つずつ解説していきます!

$(function (){ここに指示}); 

上記のソースコードの一行目部分になります。

これは、HTMLの読み込み完了後に{}内の指示を実行してください、というコードです。

これがないと、HTMLを完全に読み込む前にjQueryで書いたコードが実行されてしまい、反映されない可能性があります。

jQueryを使う時のお決まりの記述です。

$(window).scroll(function() {ここに指示}); 

上記のソースコード二行目部分になります。

$(セレクタ).イベント(function() {ここに指示}); これはjQueryでよく使われる書き方ですね。

今回はウィンドウをスクロールする時に透過を実行したいので、セレクタ部分にはwindow、イベント部分にはscrollを入れます。

そして(function() {ここに指示})部分です。こちらは無名関数と呼ばれるものです。

無名関数

無名関数とは、その名の通り、名前がつけられていない関数のこと。

今回のケースでは、固定・透過を反映させたいのはヘッダー部分だけです。このように、一度指示して完了する際、無名関数は大変便利です。

要するに、読み込みが完了したら{}内の指示を実行してください、というコードということです。(これだけ見ると単純に聞こえますが、意外と奥が深いです…)

無名関数を使うメリットとしては、コードがシンプルになりますし、関数名が重複してコードが壊れるリスクを減らす事が出来ます。

逆に、関数に名前をつける場合は?

余談になってしまいますが、逆に関数名をつけるのはどのような時なのでしょうか。それが分かった方が理解が深まると思います。

あくまでも余談なので、興味ない、とか知ってるよ!っていう方は読みとばして下さいね。

想像してみてください。関数たちがたくさんいます。

その中のある関数を呼び出したい。

その時に、「おーい、関数ー!」と呼んでみます。

その時、名前をつけられていない関数はみんな「はーい!」と返事をしてしまいます。これでは望んでない処理が行われてしまいますね。

そこで、関数に名前をつけます。ここで仮に名前をyとすると、「おーい、yー!」と呼び出せば特定の関数を好きな時に呼び出す事が出来ますね。

んー、理屈は理解出来るけど、いまいちピンと来ないな…という方もいますよね?私はそうでした。

では、実際のコードでみてみましょう。

関数に名前をつける場合の記述は次のように書く事が多いと思われます。

function 関数名(必要があれば引数) {ここに指示}

これで指示に関数名をつけられます。

んー、やっぱりピンと来ない…。

私は数学で考えて、ストンと理解が出来た(気がする)ので、そちらで解説します。

例えば、a+bという計算を、a・bの数字を変えて何度も行いたかったとします。

もし、関数名をつけていなかったらどうでしょうか。

何度も同じ関数を指示するのが面倒ですよね。

そこで名前をつけます。

function y(a,b){
 return a + b;
} 

これはy=a+bと同じ意味です。

上記のように書く事で、a+bの処理を行いたい時にいちいち式を書かなくても、yという名前で処理を呼び出せば事足りるわけです。

このように何度も使う同じ関数を使用する場合には、関数に名前をつけたほうが便利ですね。

ちなみに関数名は自分が分かりやすいように付ければOKです。(今回は数学と絡めるために関数名をyにしましたが、意味のない文字列は関数の内容が分からなくなるので、実際に書く時はやめといた方が良いです。)

実は無名関数に名前をつける方法もあったりするのですが、ここでは解説しきれないので割愛します。関数、奥深すぎ…泣きそう…。

if ($(window).scrollTop() > 0){}else{}

これはソースコードの三〜六行目部分になります。

なんとなく視覚的に理解しやすいですよね。いわゆるif文と呼ばれるものです。

基本的な書き方は下記の通りです。

if (条件式) {処理}

scrollTop()は要素が上から垂直にどのくらいスクロールされたかを取得するメソッドです。

今回は、スクロールされてない時は透過せず、少しでもスクロールされたら透過する動きをつけたいです。

つまり「もし少しでもスクロールされたら透過、それ以外は透過しない」という事です。

この「もし少しでもスクロールされたら透過」の部分がif ($(window).scrollTop() > 0)にあたるわけです。

そして「それ以外」の部分がelse以降の記述になるわけですね。

まとめ

いかがだったでしょうか。

分かりやすく説明しようとすると、説明のための説明が必要で、それを説明するための説明が必要で…とやたら長くなってしまいました…。

自分なりに分かりやすく解釈を…と思ったのですが、なかなか難しいですね。

果たしてこれで良いのかと思いつつ、誰かの役に立ったらいいな…なんて。

いやー、マークアップ及びプログラミングは奥が深い…難しいけどそこが面白いですね。

それでは今回はこの辺で…おしまい!