開発したアプリなど一覧

jQueryで作るスクロール追随型サイドメニュー

記事内にアフィリエイトリンクを含む場合があります

スクロールしても表示されるサイドメニューが必要になったので簡単に書いてみた。

onScroll 時に position の値を変更するだけの簡単な作業です。
アニメーションも必要無し。アニメーションでぬるっと動くようなものであれば .css() のかわりに .animate() 使えば良いのだろうか。試してないけど。

$(document).ready(function() { var sidebar = $("#sidebar"); var _window = $(window); var offset = sidebar.offset(); var topPadding = 50; _window.scroll(function() { if (_window.scrollTop() > offset.top) { sidebar.css({marginTop:_window.scrollTop() - offset.top + topPadding }); } else { sidebar.css({marginTop:0}); } }); });

jQuery書くのはJavaScript書くのとはちょっと違う気がする。jQuery便利すぎる。

Sponsored Link

コメント

タイトルとURLをコピーしました