title: How to control when a jQuery slideToggle(); which is position:absolute; is higher than viewport?
body: <p>I have a slideToggle(); menu which is positioned absolutely on the bottom of the page. The slideToggle(); is going to show big content and sometimes this ends up being taller than the viewport. </p>
  
  <p>My question is, how do I prevent the menu to:</p>
  
  <p>1 - Not going on the top of the logo as they are both on the sidebar of my website </p>
  
  <p>2 - When it reaches a height taller than the viewport, this will be scrollable</p>
  
  <p>To explain myself better, I'd like the content of my menu, once is shown by slideToggle(); and whenever is taller than the viewport's height minus logo's height, to stop right below my logo and to continue expanding downwards if that's the case, and that I am able to scroll it down despite its position:absolute. </p>
  
  <p>Does anyone have an idea on how I can achieve that? Please have a look at the snippet. </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>$( "#click" ).click(function() {
    $( ".content" ).slideToggle();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.logo {
    background: #11a1d6;
    margin: 10px;
    height: 100px;
    width: 300px;
  }
  
  .list {
    width: 200px;
    position: absolute;
    bottom: 20px;
  }
  
  .content {
    background: #082965;
    height: 10000px;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="logo"&gt;&lt;/div&gt;
  
  &lt;ul class="list"&gt;
   &lt;li id="click"&gt;
     Click me
     &lt;div class="content"&gt;&lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>