title: Show hidden div when scrolled halfway through viewport
body: <p><em>EDIT</em> Hopefully this is more clear. :)</p>
  
  <p>Right now, as you scroll down, you'll notice that the pink colored div only appears when it touches the top of the viewport. How can I make it appear when it touches half way through the viewport?</p>
  
  <p><a href="https://jsfiddle.net/1p751fz5/" rel="nofollow">https://jsfiddle.net/1p751fz5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// constants
  var BTN_CLS = 'owl-thumb-item',
    BTN_ANIMATION_MILLIS = 200,
    DIV_ANIMATION_MILLIS = 1000;
  
  // document ready handler
  $(document).ready(function() {
   
    // display buttons from first 'div'
    showBtns('one', BTN_CLS);
    
    // window scroll handler
    $(window).scroll(function() {
      $('.hidden').each(function(i, v) {
        if ($(window).scrollTop() &gt; $(this).offset().top) {
         // show 'div' when scrolling
         showDiv($(this), onCompleteDivAnimation($(this)));
        }
      });
    });
  
  });
  
  /**
   * Used to show an animated 'div' and perform some actions.
   * @param {Function} completeCallback Action performed after animation.
   * @param {Object} div Target element.
   */
  function showDiv(div, completeCallback) {
    // check if 'div' is currently animated and avoid animation queue
    if (!div.is(':animated')) {
      div.animate({
        opacity: 1
      }, {
        complete: completeCallback,
        duration: DIV_ANIMATION_MILLIS
      });
    }
  };
  
  /**
   * Used to perform actions after completing a 'div' animation.
   */
  function onCompleteDivAnimation(div) {
   showBtns(div.prop('id'), BTN_CLS);
  };
  
  /**
   * Used to show button(s) from a 'div' element.
   * @param {String} divId Target element Id.
   * @param {String} btnCls Button(s) CSS class.
   */
  function showBtns(divId, btnCls) {
    var btnGroup = getBtnGroup(divId, btnCls);
  
    animateBtn(btnGroup);
  };
  
  /**
   * Used for creating a group of button(s) from a 'div' element.
   * @param {String} divId Target element Id.
   * @param {String} btnCls Button(s) CSS class.
   * @returns {Array} btnGroup
   */
  function getBtnGroup(divId, btnCls) {
    var domBtns = $('#' + divId + ' .' + btnCls),
      btnGroup = [];
  
    for (var i = 0; i &lt; (domBtns || []).length; ++i) {
      btnGroup.push(domBtns[i]);
    }
  
    return btnGroup;
  };
  
  /**
   * Used to animate a button group that normally comes from a 'div' element.
   */
  function animateBtn(btnGroup) {
   btnGroup = btnGroup || [];
  
    $(btnGroup.shift()).fadeIn(BTN_ANIMATION_MILLIS, function() {
      if (btnGroup.length &gt; 0) {
        animateBtn(btnGroup);
      }
    });
  };</code></pre>
  </div>
  </div>
  </p>