マウスストーカーをスクロールしても画面のそのままの位置に固定したい。

Question

前提・実現したいこと

マウスストーカーを実装していたのですが、スクロールをすると画面外に出てしまい、その位置でマウスを動かすとまた出現します。これを通常のマウスみたいにスクロールしてもその位置に固定したいです。

該当のソースコード

/*=======================================
	マウスストーカー
	=========================================*/

  var
  cursor = $(".cursor"),
  follower = $(".follower"),
  cWidth = 20, //カーソルの大きさ
  fWidth = 40, //フォロワーの大きさ
  delay = 10, //数字を大きくするとフォロワーがより遅れて来る
  mouseX = 0, //マウスのX座標
  mouseY = 0, //マウスのY座標
  posX = 0, //フォロワーのX座標
  posY = 0; //フォロワーのX座標
  
  //カーソルの遅延アニメーション
  //ほんの少ーーーしだけ遅延させる 0.001秒
  TweenMax.to({}, .001, {
    repeat: -1,
    onRepeat: function() {
      posX += (mouseX - posX) / delay;
      posY += (mouseY - posY) / delay;
      
      TweenMax.set(follower, {
          css: {
            left: posX - (fWidth / 2),
            top: posY - (fWidth / 2)
          }
      });
      
      TweenMax.set(cursor, {
          css: {
            left: mouseX - (cWidth / 2),
            top: mouseY - (cWidth / 2)
          }
      });
    }
  });
  
  //マウス座標を取得
  $(document).on("mousemove", function(e) {
      mouseX = e.pageX;
      mouseY = e.pageY;
  });
  
  $("a").on({
    "mouseenter": function() {
      cursor.addClass("is-active");
      follower.addClass("is-active");
    },
    "mouseleave": function() {
      cursor.removeClass("is-active");
      follower.removeClass("is-active");
    }
  });

<div class="cursor"></div>
<div class="follower"></div>

.cursor,
  .follower {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  
  .cursor {
    width: 20px;
    height: 20px;
    background-color: #f24e54;
    z-index: 1001;
    &.is-active {
        transform: scale(1);
        background-color: #f24e54;
      }
  }
  
  .follower {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(#f24e54, .5);
    z-index: 1000;
    transition: transform ease .1s;
    text-align: center;
    span {
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      transform: scale(0);
    }
    &.is-active {
      transform: scale(3);
      background-color: rgba(#f24e54, .5);
    }
  }

試したこと

.follower {position: absolute;}を.follower {position: fixed;}にしてみたら、メインビジュアルは理想的な動きになったのですが、下の方にスクロールすると挙動がおかしくなりました。

Answer 1

fixed にしたうえで、clientX/clientYを使うことで改善します。

      //mouseX = e.pageX;
      //mouseY = e.pageY;
      mouseX = e.clientX;
      mouseY = e.clientY;

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY