on:2017年10月16日sponsorsサイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。Sidebarの特徴スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。特定の状況下でフックするために、イベントトリガーを用意。コンテナが長くても短くてもサイドバーを扱うことができます。他のスクリプトへの依存はなく動作。jQueryやZeptoのプラグインとして利用することも可能。Sidebarのハイパフォーマンスな軽快な動作は、デモページで体験できます。長いコンテンツと短いサイドバーのページ。サイドバーは上に20px空けてくっつきます。デモはIE9を含む、最新のブラウザでご覧ください。Basicサイドバーが長い場合は、ビューポートからサイドバーははみ出して表示されます。その場合でも、コンテンツについて心配する必要はなく、サイドバーを独立して上下にスクロールさせます。外部ファイル当スクリプトを外部ファイルとして記述します。src="js/sticky-sidebar.js"></script></body>jQueryやZeptoのプラグインとして利用することできます。その場合は「jquery.sticky-sidebar.js」を使用してください。src="js/jquery.sticky-sidebar.js"></script></body>HTMLHTMLの基本構造です。ラッパー、コンテンツ、サイドバーのclassは任意の名前が利用できます。サイドバーの内側のラッパー「.sidebar__innner」はオプションですが、この名前を使用することもお勧めします。--></div></div>JavaScriptスクリプトを初期化し、実行します。オプションでは、くっついた際の上下のスペースが指定できます。