スクロールで下からフェードインする動きを実装したら、ページ内リンクがずれる

JQueryでページスクロールしたら、要素がふわっとフェードインするJQueryを実装した。

HTML

<div class="fadeIn">test</div>
<div class="fadeIn">test</div>

scroll.js

 $(window).on('load scroll', function (){

    var box = $('.fadeIn');
    var animated = 'animated';

    box.each(function(){

      var boxOffset = $(this).offset().top;
      var scrollPos = $(window).scrollTop();
      var wh = $(window).height();

      //画面内のどの位置で処理を実行するかで「100」の値を変更
      if(scrollPos > boxOffset - wh + 100 ){
        $(this).addClass(animated);
      }
    });
  });

CSS

.fadeIn {
  transition: 1.5s;
  opacity: 0;
  transform:translatey(100px);
}

.fadeIn.animated {
  opacity: 1;
  transform:translatey(0px);
}

これで、HTMLでfadeInのクラスが付与された「test」という文字が
スクロールするとふわっと下からフェードインするようになります。
JQueryでスクロールするとfadeInというクラスにanimatedというクラスが追加されるようにしてあるので、
CSSで指定している●pxの部分が、フェードインする動きの幅になるイメージです。

transformを使った方が良い

transform:translatey(●px）;ですが、
最初はmargin-topにしていました。

CSS

.fadeIn {
  transition: 1.5s;
  opacity: 0;
  margin-top: 100px;
}

.fadeIn.animated {
  opacity: 1;
  margin-top: 0px;
}

こんな感じで。

そしたら、ページ内リンクの位置がズレる・・・！
margin-topであった100pxがスクロールすることでanimatedクラスが追加されて、なくなってしまうからですね。。

transformはあまり使ったことありませんでしたが
勉強になりました◎