すたらブログ

文系Webプログラマの備忘録

jquery.simpleScrollFollow: 画面スクロールに合わせて特定の要素を移動させるjQueryプラグイン

version: 3.0.0 (2017-04-25)

特徴

指定するオプションがほとんどない、とても簡素なプラグインです。
基本的には、limit_elemオプションに下限の基準となる要素を指定するだけです。

赤色の要素が画面スクロールに追随します。

aside要素は$('body')を、nav要素は$('article')を、それぞれ追随の下限に設定しています。

分岐の考え方

現在は下記の判断基準で、追従要素をどこに配置するかを決めています。

if (画面上辺は上限より上か?) {
  要素上端は上限へ
} else if (画面上辺は下限より下か?) {
  要素下端は下限へ
} else if (画面高は要素高より高いか?) {
  if (下限 - 画面上辺は要素高より短いか?) {
    要素下端は下限へ
  } else {
    要素上端は画面上辺へ
  }
} else {
  if (画面下辺は下限より下か?) {
    要素下端は下限へ
  } else if (画面下辺 - 上限 は、要素高より長いか?) {
    要素下端は画面下辺へ
  } else {
    要素上端は上限へ
  }
}