jQuery で下記ができれば、一般サイトでよく見かけるような、少し動きのあるサイトが作れる。
これらとif文使えば、ある程度のことができるかも。
自分で学習した構文をメモ。
●高さや量の取得
//スクロール量の取得
$(window).on('scroll', function () {
var sc = $(this).scrollTop(); //スクロール量を変数に格納
}
or
$(window).scrollTop();
//ウィンドウの高さ
$(window).height();
//指定ブロックコンテンツの高さ取得
//取得する値：コンテンツ + padding + border + margin
$('.class').outerHeight(true);
//コンテンツのページ上の位置の取得
$('.class').offset().top;
ページの左上の角からの位置。
.offset() でコンテンツの左角の位置（x軸、y軸）の位置が取れる。
.offset().top でy軸だけ、
.offset().left でx軸だけ取得できる。
●表示・非表示
・非表示クラスの付加・削除
・フェードイン・フェードアウト
//非表示クラスの追加
$('.xxx-area').addClass('is-hidden');
//非表示クラスの削除
$('.xxx-area').removeClass('is-hidden');
//フェードイン
$('.class').fadeOut(fade_speed);
//フェードアウト
$('.class').fadeOut(fade_speed);