スクロール量の変化で何かをする

背景

デザイナーから依頼があったｗ
スクロールやリサイズを常時監視する系のスクリプトは個人的に嫌いだけど要望なのでいたしかたない・・・。
ロード時には発火しないのでPSIスコアに大きな影響が出なさそうなのがせめてもの救いか！？

完成形の仕様

• 画面右端中央にページ内リンクのナビゲーションを固定配置
• スクロールしページ内リンクに対応するブロックに到達したら該当リンクに変化（色を変える）をつける

必要なもの

• 各ブロックのY座標
• スクロール量の監視

暫定版（とりあえず動くレベル）

hoge.haml

.nav#js-pageScroll
  %ul
    -(1..5).each do
      %li
        = link_to '' do
          ●
-(1..5).each do |num|
  %div{class: "box#{num}"}
    = num

hoge.scss

@for $i from 1 through 5{
  .box#{$i}{
    height: 500px;
    background-color: #CCC;
    border-bottom: 4px solid #000;
  }
}
.nav{
  display: inline-block;
  width: 60px;
  text-align: center;
  background-color: #F00;
  position: fixed;
  top: 50%;
  right: 0;
  a{
    text-decoration: none;
    color: #333;
    &:hover, &.active{
      color: #FFF;
    }
  }
}

hoge.js

function getCoordinate(target1, target2, target3, target4, target5){
  if(document.getElementById('js-pageScroll') != null){
    var boxes = [target1, target2, target3, target4, target5];
    var boxCoordinates = [];
    boxes.forEach(function(box){
      boxCoordinates.push(document.querySelector(box).getBoundingClientRect().top);
    });
    window.onscroll = function(){
      scrollPosition = window.pageYOffset;
      if(boxCoordinates[1] > scrollPosition){
        document.querySelectorAll('#js-pageScroll ul li a').forEach(function(anchor){
          anchor.removeAttribute('class');
        });
        document.querySelectorAll('#js-pageScroll ul li a')[0].setAttribute('class', 'active');
      }else if(boxCoordinates[2] > scrollPosition && boxCoordinates[1] < scrollPosition){
        document.querySelectorAll('#js-pageScroll ul li a').forEach(function(anchor){
          anchor.removeAttribute('class');
        });
        document.querySelectorAll('#js-pageScroll ul li a')[1].setAttribute('class', 'active');
      }else if(boxCoordinates[3] > scrollPosition && boxCoordinates[2] < scrollPosition){
        document.querySelectorAll('#js-pageScroll ul li a').forEach(function(anchor){
          anchor.removeAttribute('class');
        });
        document.querySelectorAll('#js-pageScroll ul li a')[2].setAttribute('class', 'active');
      }else if(boxCoordinates[4] > scrollPosition && boxCoordinates[3] < scrollPosition){
        document.querySelectorAll('#js-pageScroll ul li a').forEach(function(anchor){
          anchor.removeAttribute('class');
        });
        document.querySelectorAll('#js-pageScroll ul li a')[3].setAttribute('class', 'active');
      }else{
        document.querySelectorAll('#js-pageScroll ul li a').forEach(function(anchor){
          anchor.removeAttribute('class');
        });
        document.querySelectorAll('#js-pageScroll ul li a')[4].setAttribute('class', 'active');
      }
    };
  }
}
getCoordinate('.box1', '.box2', '.box3', '.box4', '.box5');

付記

とりあえず動かすだけのスクリプトなので関数名が変だったり無駄だらけな書き方なのはスルーで。
これからリファクタします。