HTML+CSS 2020-05-15
復習
今日の目標
jQueryでスクロールに反応したい
変数を使った計算
ブラウザーのコンソールで試せる
code:javascript
a = 100; // aという変数に100を入れる
b = 200; // bという変数に200を入れる
c = a + b; // => 300
d = a / b; // => 0.5。「/」は「÷」のこと
start = 300; // 変数は一文字じゃなくてもいい
end = 500;
duration = end - start;
数値と数字
code:javascript
1 // => 数値
"1" // => 数字。「"」または「'」でくくる
"a" // => 文字
a // => 変数
数値と文字の組み合わせ
code:javascript
1 + 2 // => 3 数値
"あ" + "い" // => "あい" 文字の足し算は文字が並びに加わる
"あ" + 1 // => "あ1" 文字になる(重要)。数値は自動的に数字にされる
1 + "あ" // => "1あ" 順番を変えてもルールは同じ
temperature = 32;
"今日の気温は" + temperature + "℃です。" // => "今日の気温は32℃です。"
計算結果と文字の組み合わせ
code:javascript
start = 300;
end = 500;
duration = 500 - 300;
message = "収録時間は" + duration + "秒です。" // => "収録時間は200秒です。"
勝手に決まっている変数
code:javascript
window
document
document.body
window.innerHeight
// など
ページとウィンドウの位置関係
https://gyazo.com/64c4ecee788104b5953ca1720799e22a
スクロールに反応する
code:javascript
$(window).on('scroll', () => {
let scrollTop = $(window).scrollTop(); // ウィンドウの上端が、ページ全体の上から何ピクセル下にあるか
let bodyHeight = $(document.body).height(); // <body>要素の高さ(ピクセル)
let ratio = scrollTop / bodyHeight; // ウィンドウの上端が、ページ全体の上からどれくらい(割合)下にあるか(0と1の間)(ちょっと嘘)
let percentage = ratio * 100; // ウィンドウの上端が、ページ全体の上から何パーセント下にあるか(0と100の間)
let cssValue = percentage + '%'; // パーセンテージをCSSで使える文字にした物
// ここにCSSの変更処理を書く
console.log(scrollTop);
});