この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

本当にフローティングブロックっていう名前でいいのか知りませんが、スクロールすると画面内に追随してくる的なエレメントを作ります。

こちらのサイト様のページを参考にさせて頂きました。


まずはスクロール範囲を決める枠組みと、スクロールするブロックを作成します。

<div id="スクロール範囲">
<div id="スクロールを適用するブロック">
</div>
</div>

次はcssにてスクロール範囲とスクロールするブロックの大きさや位置を指定します。

#スクロール範囲 {
width:**px;
height:**px;
position: relative;
}
#スクロールを適用するブロック {
width:**px;
height:**px;
position: absolute;
top: 0;
}

最後にスクリプトを適用します。 jQueryを使用します。
なんか参考ページだとjquery.dimensions.jsを使用していますが、別に無くても動くようです。

<link rel="stylesheet" type="text/css" href="cssファイル.css">
<script src="jquery.min.js"></script>
<script src="jquery.dimensions.js"></script>
<script>
var name = "#スクロールを適用するブロック";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>