javascriptの要素の座標取得が可変してしまう？スクロール値がおかしい？

Question

サイト掲載である要素まで到達したらバナーを表示するプログラムをjavascriptでつくったのですが、うまくいきません。

例えば、PC画面サイズがちょうど綺麗に反映しても、スマホでみると指定要素のだいぶ手前で反映されていたりするのです。
また、再ページ読み込みでも要素の座標取得位置がずれているのか、スクロールの数値がおかしいのか、表示される場所が変わったりします。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<script> var ele = document.getElementById("matome"); var bounds = ele.getBoundingClientRect(); var h = bounds.top; window.addEventListener( "scroll", function(){ document.querySelector( "#kizi1" ).style.display = ( window.pageYOffset<h ) ? "none" : "block" ; </script>

### 試したこと
サイトとしては一般的なウェブ記事サイトで、はじめ、内容、まとめと見出しが複数個ある形です。
matomeのIDは、サイトの見出しが複数あるうちの最後のまとめに<div id="matome"></div>で囲んでいます。

そして#kizi1はfixedでバナーとしてｚ数値もうえにして下に置いています。
記事内容
まとめにid="matome"
その下にscriptとバナーのid="kizi1"

画面サイズに合わせてコロコロ可変するのを止めたいです。
また、別としてスクロールして、その要素がスクロール内にはいったら表示のプログラムでも構いません。よろしくお願いします。

Answer 1

getBoundingClientRect() が返すのは「ビューポートに対する位置」なのでスクロールすれば当然変化します。毎回取り直してください。
https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect