title: How to listen for scroll event inside div element?
body: <p>I need after my <strong>.form-element</strong> scrolls fully to top (and disappears from view port) to add class to a spicific element. I cant understand now why it triggers in a half of visibility of my <strong>.form-block</strong>. Any ideas why ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $form_block = $('.form-block');
  var $wrapper = $('.wrapper');
  var $form_block_height = $form_block.outerHeight(true);
  var $form_block_filter = $('.form-block-filter');
  console.log($form_block_height)
  
  $wrapper.scroll( function(){
   var our_coordinates = $form_block.offset().top + $form_block_height;
   if(our_coordinates &lt; $wrapper.scrollTop()) {
    $form_block_filter.addClass('active');
   } else {
    $form_block_filter.removeClass('active');
   }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Abel', sans-serif;
  }
  
  .wrapper {
    border: 1px solid #333;
    width: 640px;
    height: 400px;
    margin: 30px auto;
    overflow-y: scroll;
    padding-bottom: 500px;
    position: relative;
  }
  .wrapper .form-block {
    background-color: #747474;
    height: 600px;
    width: 80%;
    margin: auto;
  }
  .wrapper .form-block-header {
    background-color: #333;
    padding: 20px;
    color: #fff;
    font-size: 24px;
  }
  .wrapper .form-block-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #d5d5d5;
    color: #333;
    font-size: 24px;
    padding: 20px 20px 20px 60px;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: 400ms;
    transition: 400ms;
  }
  .wrapper .form-block-filter.active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Abel', sans-serif;
  }
  
  .wrapper {
    border: 1px solid #333;
    width: 640px;
    height: 400px;
    margin: 30px auto;
    overflow-y: scroll;
    padding-bottom: 500px;
    position: relative;
  }
  .wrapper .form-block {
    background-color: #747474;
    height: 600px;
    width: 80%;
    margin: auto;
  }
  .wrapper .form-block-header {
    background-color: #333;
    padding: 20px;
    color: #fff;
    font-size: 24px;
  }
  .wrapper .form-block-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #d5d5d5;
    color: #333;
    font-size: 24px;
    padding: 20px 20px 20px 60px;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: 400ms;
    transition: 400ms;
  }
  .wrapper .form-block-filter.active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
   &lt;div class="form-block-filter"&gt;
    Our filter itself
   &lt;/div&gt;
   &lt;div class="form-block"&gt;
    &lt;div class="form-block-header"&gt; 
     Our form list
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>