要素の位置を取得する

縦長スクロール型のページでナビゲーションに現在位置を表示したり、ある特定の位置までスクロールしたらイベントが発火したりするコンテンツを作る場合、該当の要素の位置を取得するという工程が必要になります。

この部分だけを切り出してユーティリティ的に使えるようにしてみました。

HTML

<div id="hoge">hoge</div>
<div id="fuga">fuga</div>
<div id="fugo">fugo</div>

JavaScript

function GetElementsPosition(idAry,adjustPosition){
    this.idAry = idAry;
    this.len = this.idAry.length;
    this.adjustPosition = adjustPosition || 0;
    this.hashTable = this.generateObj();
}

GetElementsPosition.prototype = {

    //連想配列を生成
    generateObj: function(){
        var hashObj = {};
        for(var i = 0; i < this.len; i++){
            hashObj[this.idAry[i]] = this.getPosition(i) + this.adjustPosition;
        }
        return hashObj;
    },

    //要素の位置を取得
    getPosition: function(i){
        var el = document.getElementById(this.idAry[i]);
        if(el){
            return el.offsetTop;
        }
    }

}

取得したい要素を引数から受け取り、[要素名]:[位置の値]の形の連想配列を生成します。

実行

window.onload = function(){
    //初期化
    var hoge = new GetElementsPosition(['hoge','fuga','fugo']);
    //配列の呼び出し
    console.log(hoge.hashTable);
}

引数に取得したい要素名（id名）を入力して初期化します。 生成した配列を呼び出す時は[インスタンス名].hashTable。

データが返ってきます。

{hoge: 8, fuga: 24, fugo: 40}