jQueryでスクロールに追従する要素を設置する方法
<head>内に下記のように書くだけでOK！
<script type=”text/javascript”>
$(function() {
var offset = $(“#scroll_btn”).offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(“#scroll_btn”).stop().animate({
marginTop: $(window).scrollTop() – offset.top + topPadding
});
} else {
$(“#scroll_btn”).stop().animate({
marginTop: 0
});
};
});
});
</script>
$(function() {
var offset = $(“#scroll_btn”).offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(“#scroll_btn”).stop().animate({
marginTop: $(window).scrollTop() – offset.top + topPadding
});
} else {
$(“#scroll_btn”).stop().animate({
marginTop: 0
});
};
});
});
</script>
参考URL
クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法 | コリス
jQuery | Scrolling Sidebar from CSS-Tricks（DEMO）
>お仕事中の気分転換にこちらもどうぞ。
Category: JavaScript Tags: jQuery
9月 7, 2011 | No Comments
Comments
Leave a Reply
