divがページの上部に当たるとログに記録する方法

Question

私は私のページにDivを持っています。それがページの上部に当たると、console.logが出力されます。これはこれまでの私のコードですが、私にとってはうまくいかないのです。助言がありますか？ ありがとう、私の悪い英語を申し訳ありません。

var distance = $('.img').offset().top; 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     console.log("Div is now at the top of the site!") 
    } 
}); 

そして、これが私のHTMLの一部です：

<div class="img"> 
     <img src="city.jpg"> 
     </div> 

Answer 1

あなたは、ビューポートに関連する要素の位置を取得するためにgetBoundingClientRect()を使用することができます。私が追加した例を見てください。ドキュメントをスクロールするときにdivがビューポートの上部から何ピクセル分だけ記録されます。

スクロールで作業するときは、実行する作業をデバウンスすることをお勧めします。詳細については、こちらを参照してください：https://davidwalsh.name/javascript-debounce-function

const 
 
    contentDiv = document.getElementById('content-div'); 
 
    
 
function onScrollHandler(event) { 
 
    console.log(`Pixels from top: ${contentDiv.getBoundingClientRect().top}`); 
 
} 
 

 
window.addEventListener('scroll', onScrollHandler);

.vertical-space { 
 
    height: 200vh; 
 
} 
 

 
.content-div { 
 
    background-color: #333; 
 
    color: #fff; 
 
}

<div class="vertical-space"></div> 
 
<div id="content-div" class="vertical-space content-div">Now you see me</div>