title: Fixed wrap with jQuery
body: <p>In my page I have a div (fixed wrap) that I want to move after the scroll. 
  I tried something with jQuery, but the height of the div is too high and goes over the footer.</p>
  
  <p><a href="https://i.stack.imgur.com/Rxdpj.png" rel="nofollow noreferrer">img1</a></p>
  
  <p><a href="https://i.stack.imgur.com/Z93cW.png" rel="nofollow noreferrer">img2</a></p>
  
  <p>Here's my code:</p>
  
  <p>Sorry, edit2:
  <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 elementPosition = $('#fixed-wrapper').offset();
  $(window).scroll(function() {
    if ($(window).scrollTop() &gt; elementPosition.top) {
      $('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%');
    } else {
      $('#fixed-wrapper').css('position', 'static');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
   width: 101%;
   padding: 10px 0px 0px;
   margin: -10px -10px 10px -10px;
   background-color: rgba(0, 0, 0, 0.7);
   display: table;
   min-width: 700px;
  }
  
  #main-bets{
   display: table;
   float: left;
   width: 68%;
   margin-left: 7%;
   margin-top: 20px;
   margin-bottom: 30px;
   min-width: 900px;
   max-width: 900px;
   background-color: rgba(0, 0, 0, 0.5);
  }
  
  #fixed-wrapper {
       display: table;
       float: right;
       width: 22%;
       right: 5px;
       margin: 20px 1%;
       max-width: 300px;
  }
  
  #footer {
   width: 101%;
   padding: 10px 0px 0px;
   margin: 20px -10px -10px -10px;
   background-color: rgba(0, 0, 0, 0.7);
   display: table;
   clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
      ...
  &lt;/div&gt;
  
  &lt;div id="main-bets
      ...
  &lt;/div&gt;
  
  &lt;div id="fixed-wrapper"&gt;
   ....
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
   ...
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>