on:2017年4月26日sponsorsHTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。sticky;」の代替になる便利なスクリプトです。Stickyで貼り付ける要素の位置は、親要素に依存します。スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。基本的な動作を見てみましょう。20px;」を指定してみます。下方向にスクロールした場合、その要素はビューポートの最上部から20pxの位置に表示されるまでは通常通りスクロールで移動し、貼り付きません。最上部から20px以下になると、その要素以外はスクロールで移動しますが、その要素だけ20pxの位置に貼り付きます。20px;」を見てましょう。上方向にスクロールした場合、20px以上空いていれば、通常通りにスクロールされて表示されます。20px以下の時20px以下であれば、その位置に配置され、コンテナの範囲内で貼り付きます。Miniではサポートされていません。SafariやFirefoxでもバグがあるため、利用を控えている人が多いでしょう。Miniは静的に配置されます。Stickyのデモデモではスクロールをすると、指定した要素を親要素となるコンテナ内にぴたっと貼り付けます。外部ファイル当スクリプトを外部ファイルとして記述します。HTML貼り付けたい要素にclassを与え、その要素を指定するためのidも与えます。CSS要素を配置するためのCSSを記述します。上部でも下部でも、どんな値でもサポートされています。JavaScriptjQueryのセレクタで要素を指定し、スクリプトを実行します。