title: combine conditions if browser window is X height and element is scrolled to X point within
body: <p>I've started with the below which works perfect, but I only need this to run and execute when my nav element <code>.mainNav</code> is scrolled to within a certain point within browser height.</p>
  
  <pre><code>@media screen and (max-height: 660px) {
    .mainNav {
      margin-top:-130px !important;
    } 
  } 
  </code></pre>
  
  <p>So detecting vertical browser height <strong>WITH</strong> scroll position within then chain <code>.css</code> with jQuery to. (<code>margin-top:-100px</code>)</p>
  
  <p>Basically how to combine above parameter with below parameter. Below detects scroll position...</p>
  
  <pre><code>var $document = $(document),
      $element = $('#some-element'),
      className = 'hasScrolled';
  
  $document.scroll(function() {
    if ($document.scrollTop() &gt;= 50) {
      // user scrolled 50 pixels or more;
      // do stuff
      $element.addClass(className);
    } else {
      $element.removeClass(className);
    }
  });
  </code></pre>