jQuery で下記ができれば、一般サイトでよく見かけるような、少し動きのあるサイトが作れる。
これらとif文使えば、ある程度のことができるかも。
自分で学習した構文をメモ。

●高さや量の取得

//スクロール量の取得
$(window).on('scroll', function () {
  var sc = $(this).scrollTop(); //スクロール量を変数に格納
}

or

$(window).scrollTop();

//ウィンドウの高さ
$(window).height();

//指定ブロックコンテンツの高さ取得
//取得する値：コンテンツ + padding + border + margin
$('.class').outerHeight(true);

参照
https://uxmilk.jp/40801

//コンテンツのページ上の位置の取得
$('.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);