要素の位置を固定する

  1. まず、以下の <style><script> を、<head> の中に丸ごと入れます。

    <style type="text/css"><!--
    /*位置を固定する部分のスタイルシート設定*/
    #floatingID {
     position:absolute; /*これだけは必須*/
     width:100%;
     height:auto;
     padding:5px;
     background:#ccc;
     color:#f00;
     border:2px solid #ff0;
     font-weight:700;
    }
    --></style>

    <script type="text/javascript"><!--
    function floatingStart() {
      if (brw) {
        var speed = 50; //少ないほどスクロール遅れが小さくなるけど、負荷は高くなる
        var x = 0;      //固定する横位置(左端からの距離)
        var y = 100;    //固定する縦位置(上端からの距離)
        var id = "floatingID"; //<div>に設定してあるID名
        var d = document;
        floatingObj = d.all ? d.all(id).style : (d.layers ? d.layers[id] : d.getElementById(id).style);
        floatingTimer = setInterval("floating(" + x + "," + y + ")", speed);
      }
    }

    var brw = document.all || document.layers || (document.getElementById && !window.opera);
    var floatingTimer, floatingObj;

    function floating(posX, posY) {
      if (document.all) {
        floatingObj.pixelLeft = document.body.scrollLeft + posX;
        floatingObj.pixelTop = document.body.scrollTop + posY;
      } else if (document.getElementById) {
        floatingObj.left = window.pageXOffset + posX + "px";
        floatingObj.top = window.pageYOffset + posY + "px";
      } else {
        floatingObj.left = window.pageXOffset + posX;
        floatingObj.top = window.pageYOffset + posY;
      }
    }

    function floatingToggle() {
      if (floatingTimer) {
        clearInterval(floatingTimer);
        floatingTimer = null;
        alert("位置の固定を解除しました");
      } else {
        floatingStart();
        alert("位置を固定しました");
      }
    }

    window.onload = floatingStart;//-->
    </script>
  2. 次に、下記の部分を<body>内の適当なとこに放りこみます。

    <script type="text/javascript"><!--
      if (brw) document.write("<div id='floatingID'>");//-->
    </script>

    <p>位置を固定したい部分をこの間に入れる。タグ混じりでもなんでも可。
    JavaScriptがオフの時は入れた位置にそのまま表示されるので、よく考えましょー。</p>


    <script type="text/javascript"><!--
      if (brw) document.write("<\/div>");//-->
    </script>
  3. 固定/解除の切り替えボタンを付けたい時は、以下を適当なとこへ。

    <form>
      <p><input type="button" onclick="floatingToggle()" value="位置固定の解除/再開"></p>
    </form>


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)