スクロールしたら要素を表示する

どの位置までスクロールしたら表示を切り替えるか？の境界線を変数で定義します。

境界線を超えているかどうか？の判定を保持する変数を定義します。
画面リロードした場合など、最初から境界線を超えている可能性もあるため、現在のスクロール位置と境界線を比較します。

表示・非表示を切り替える要素を特定します。
同時に上部固定になるようにスタイルを付与します。

表示切り替え関数を定義します。
画面外から画面内に入ってくるようなアニメーションにするため、transformスタイルを使用します。
非表示関数は自身の高さ分上にずらすようにします。
表示関数はずらしたスタイルを消すだけです。

isOver変数を確認し、初期状態を表示 or 非表示にしておきます。

スクロールイベントを設定していきます。
現在のスクロール位置が境界線を超えているか？
前回のスクロールイベント時に境界線を超えていたか？（isOver変数の確認）
の２つをセットで確認します。
この条件に応じて表示切り替え関数とisOver変数の更新を行います。
isOver変数は境界線を跨いだ時に処理を１度だけに制限するのに役立ちます。

最後にアニメーションを有効にするためのスタイルを追加します。
setTimeoutをしているのは、初期状態を決める時に呼んだ関数がアニメーションにならないようにするためです。