7.Scroll を制御する　編

 

今回考えた scroll を制御する際の仕組みを、概念図として作成してみました。

図では右サイドの要素を縦に３つ設定しています。
左サイドの要素は１つのブロックで構成していますが、右サイドの要素はレスポンシブを考慮して、独立した２つの要素に対して制御しています。

各ブロックの [width:] の値は、出来ればCSS3の [calc] を使用して簡単に済ませたかったのですが、現時点で [calc] に非対応のブラウザが存在するため、[javascript] によるCSS操作を行っています。

又、各コンテンツブロックのサイズを自由にリセットした場合でも、CSSの設定値を取得して対応する方式で javascript を構成していますので、フレキシブルなレイアウト設定でも検証が可能です。(各要素のCSS値を変更してください)、ただその分 javascript の構文に不必要なムダが有る点はご容赦願います。

センターコンテンツブロック内のグラデーションラインと、サイドコンテンツブロック内の無意味な [side contents] 表記は、スクロールの視認用で有り、全く意味の無いもので有ります。

尚、javascript の構文については、仕組みの理解を全てに優先させるため、非効率的な部分が有る事を予めお断りいたします。

下記概念図の考え方は極めてシンプルです。
可視領域 = Window Inner Size と考えます。
可視領域が上下にスクロールした場合に、停止させたい要素の停止位置(Stop Point)を求めて、スクロールがその位置に達した時に、相対位置(position: absolute;) から絶対位置(position: fixed;) に書き換え、停止位置の指定を解りやすく(top:) から(bottom:) にしています。

各要素の Stop Point を求めるのは図に示した要素の相関関係をご覧に成れば解りやすいと思います。
side[StopPoint] = ( sh + st + FH ) - WH
margin X  =  b02T  -  ( b01T + b01H )
box002 [StopPoint]  =  ( b02T + b02H + FH ) - WH
box002 : stop(css値)  =  fixed , bottom : FH
box001 [StopPoint]  =  box002[StopPoint]
box001 : stop  =  fixed,bottom : FH + b02H + margin X

考え方として[margin X]を用いましたが、box001 と box002 を両方とも停止させたいのであれば、この２つの要素を１つの要素と仮定すれば良いだけです。
なにぶん、つたない「算数」での理論づけでございました。