スクロールでCSSで要素の固定を切り替える際のちらつきをどうにかしたい。

Question

いつもお世話になっております。
現在とあることをやりたいのですが、微妙に実現できずに困っています。

やりたいことはまず最初はある画像要素をウィンドウの下に固定させています。
スクロールしてあるボックス要素がウィンドウ内に入ってきたら画像要素の固定を解除したいのです。

そこでjavascript でウィンドウの高さを取得し、スクロール内でボックス要素のtopの位置をgetBoundingClientRectで取得して、ウィンドウの高さより小さくなったら画像要素に「isRelative」といったクラスを追加して「position:relative」にして、ボックス要素がウィンドウの高さを超えたら（見えなくなったら）画像要素をウィンドウの下に固定するためにクラスを削除するといった内容です。

ただボックス要素がウィンドウ近くになるとチカチカしてちらつきボックス要素と画像要素がブレます。おそらくずっとボックス要素のtopの位置を取得しているのが原因だと思うのですがこれをどう処理したらいいのか分かりません。

ご教授よろしくお願いいたします。以下コードです。

固定させる画像が「fixed」で特定のボックス要素が「kanren」といったIDです。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div id="fixed"><img src="photo.jpg"></div>
<div id="kanren" class="box"></div>

.box{
  width:400px;
  height:400px;
  background-color:#333;
  margin-top:30px;
}

#kanren{
  background-color:#ff0000;
}

#fixed{
  position:fixed;
  bottom:0;
}

#fixed.relative{
  position:relative;
}

var wh = window.innerHeight;

var kanren = document.getElementById("kanren");  //基準となる特定のボックス
var fixed = document.getElementById("fixed");  //固定させている画像


window.addEventListener("scroll", e => {

  //ポジションを取得
  var pos = kanren.getBoundingClientRect();
  var py = Math.floor(pos.top);
  
  if (py < wh) {
      fixed.classList.add("relative");
    }else{
     fixed.classList.remove("relative");
    }
});

Answer 1

var wh = window.innerHeight;

var kanren = document.getElementById("kanren");  //基準となる特定のボックス
var fixed = document.getElementById("fixed");  //固定させている画像

kanren.style.marginTop = fixed.clientHeight + 'px'; // ここと

window.addEventListener("scroll", e => {
  //ポジションを取得
  var pos = kanren.getBoundingClientRect();
  var py = Math.floor(pos.top);
  kanren.style.marginTop = fixed.clientHeight + 'px'; // ここと
  if (py < wh) {
    fixed.classList.add("relative");
    kanren.style.marginTop = 0; // ここを追加
  }else{
    fixed.classList.remove("relative");
  }
});

サンプル

Comments

[退会済みユーザー]

ありがとうございます！！実現できました。　ただまた別件？になってしまうかもですが、要素をページ下部に固定するとiphoneでスクロール時に一瞬ちらっと動く？ちらつくようなことが起きてしまいます。
こちらについてはなにか原因とかわかったりしますでしょうか？
fixedとスクロールが原因っぽいのですが。。

検討違いであればまた別の質問を立てます。

[kyoya0819]

了解しました。実機で検証してみます。

[退会済みユーザー]

上記のちらつき？ですがおそらくiphone 11で起こってるような気がします。
原因は分かりませんが日数が経ってしまったし、もともとの質問は解決したのでベストアンサーとさせていただきます。ありがとうございます。

[kyoya0819]

返信遅くなり申し訳ございません。

当方所持機器でも同様の挙動が確認できました。
SP全てに起きる事象だと思われます。回答修正します。

[kyoya0819]

サンプルの方も修正しましたのでご確認いただけますと幸いです。

[退会済みユーザー]

おお、さっそくのご回答ありがとうございます！ただ、実機がないもので、、、明日会社にいったらいろんなスマホでテストしてみたいと思います！

[kyoya0819]

了解しました。

[退会済みユーザー]

バタバタしており遅くなりました。
確認しましたが、問題ないと思います。

今回は非常に助かりましたし勉強になりました！　いろいろ試していただきありがとうございます。