title: .slideToggle() hides element when it reaches the top of the page, animation appears cut short
body: <p>I'm creating a mobile navigation that slides down, and I'm using .slideToggle() to animate it</p>
  
  <p><a href="https://jsfiddle.net/qzc982h6/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;table id=menu&gt;
   &lt;tr&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
    &lt;td align="center"&gt;link&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#menu {
    display: none;
    position: absolute;
    margin-top: 50px;
    width: 100%;
    height: 150px;
    background-color: #fff;
    z-index: 8;
  }
  
  tr {
    height: 50px;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(".toggle").click(function() {
      $("#drop").toggleClass('flip');
      $("#menu").slideToggle(300);
  });
  </code></pre>
  
  <p>but the table is taller than my header and when the it slides to the top of the page it just disappears instead of finishing the slide animation (see fiddle).</p>
  
  <p>Any way to solve this? Or a better animation to use?</p>
  
  <p>Thanks!</p>