Detect when static element overlaps fixed element position on scroll
<p>How to properly detect when a static element overlaps a fixed element y position on event scroll ?</p>

<p>I'm sure I've done this before, but at the moment I missing something (example here <a href="http://jsbin.com/hetovoduwi/edit?css,js,console,output" rel="nofollow">http://jsbin.com/hetovoduwi/edit?css,js,console,output</a>).</p>

<p>js:</p>

<pre><code>window.addEventListener('scroll', function () {
  console.log('win y:' + window.scrollY);

var b = document.querySelector('.b').getBoundingClientRect();

console.log(b);

/*
console.log('(b.top+b.height)', (b.top+b.height));

  console.log('window.scrollY - 50', window.scrollY - 50)
*/
});
</code></pre>

<p>html:</p>

<pre><code>  &lt;div class="a"&gt;&lt;/div&gt;

  &lt;div class="b"&gt;&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.a {
  position: fixed;
  width: 50px;
  height: 50px;
  background: red;
  top: 50px;
}
.b {
  margin-top: 30vh;
  width: 50px;
  height: 50px;
  background: blue;
}

body {
  height: 100vh;
}
</code></pre>