本当にフローティングブロックっていう名前でいいのか知りませんが、スクロールすると画面内に追随してくる的なエレメントを作ります。
こちらのサイト様のページを参考にさせて頂きました。
まずはスクロール範囲を決める枠組みと、スクロールするブロックを作成します。
<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>