スクロールについてくる要素

今回はCSS と JavaScript を使って、「ウィンドウのスクロールについてくる要素」を作ります。

このコードのポイントは、ウィンドウのスクロール量を正しく求めるところです。他は面倒なところはありません。スクロール量、X, Y はそれぞれ下記のコードの getScrollPosX, getScrollPosY で求めています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd ">
<html>
<head>
<title>スクロールについてくる</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<script type="text/javascript">
function getScrollPosX() {
    if (typeof window.pageXOffset != 'undefined') {
        return window.pageXOffset;
    }
    else if (typeof document.documentElement.scrollLeft != 'undefined'
&& document.documentElement.scrollLeft > 0) {
        return document.documentElement.scrollLeft;
    }
    else if (typeof document.body.scrollLeft != 'undefined') {
        return document.body.scrollLeft;
    }
    return 0;
}

function getScrollPosY() {
    if (typeof window.pageYOffset != 'undefined') {
        return window.pageYOffset;
    }
    else if (typeof document.documentElement.scrollTop != 'undefined'
&& document.documentElement.scrollTop > 0) {
        return document.documentElement.scrollTop;
    }
    else if (typeof document.body.scrollTop != 'undefined') {
        return document.body.scrollTop;
    }
    return 0;
}

function addEvent(element, eventType, fn, useCapture) {
    if (element.addEventListener) {
        element.addEventListener(eventType, fn, useCapture);
        return true;
    }
    else if (element.attachEvent) {
        var r = element.attachEvent('on' + eventType, fn);
        return r;
    }
    else {
        element['on'+eventType] = fn;
    }
}

function onScroll(evt) {
    var elm = document.getElementById('viewer');
    var x = getScrollPosX();
    var y = getScrollPosY();
    moveElm(elm,x,y);
}

function moveElm(elm,x,y) {
    var elm = document.getElementById('viewer');
    elm.style.left = 0; // relative!
    elm.style.top = y + 'px';
}

function init(evt) {
    addEvent ( window, 'scroll', onScroll, false );
    var elm = document.getElementById('viewer');
    moveElm(elm, 0,0);
}

addEvent (window, 'load', init, false );

</script>
<style type="text/css">
.foo {
    width: 150px;
    background: #e8eefa;
    text-align: center;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #999999;
}
</style>
</head>
<body>
<table border='1'>
<tr>
<td width='100%'>
<div style='height: 1000px;'></div>
</td>
<td id='right_column' valign='top'>
<div class="foo" id="viewer" align='center'>
Hello, world!
</div>
</td>
</tr>
</table>
</body>
</html>

もうひとつのポイントとしては、今回はテーブルの右カラムに対する相対座標として <div> 要素の座標を定義した所です。これによって、div 要素の x 座標は常に 0 で良いことになります。