title: Auto resizing and sticky (top and bottom) div jQuery
body: <p>I have a challenge to solve. I'm making an auto resizing and sticky (top and bottom) div. You can see the example here <a href="http://www.sixplus1.com/inventmx/sixplus1_b.html" rel="nofollow">http://www.sixplus1.com/inventmx/sixplus1_b.html</a></p>
  
  <p>The problem is when I scroll the window to the bottom (where the div has to stop) the div disappears, I think is due a margin top issue so I need ideas to solve it. Please see the example and scroll the window to the bottom line. ANY HELP WILL BY HIGHLY APRECIATED. </p>
  
  <p>I need to get this done ASAP</p>
  
  <p>Hope you can helpme and. Heres is the code..</p>
  
  <p><strong>NOTE: The div on the code named #content_derecha has the class sticky</strong> </p>
  
  <pre><code>&lt;script src="jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function(){
  
  //I make the div with elastic properties
  var bottomPosition = $(window).height();
  $('#content_derecha').height(bottomPosition); //in this example #content_derecha is the div that has to be elastic and sticky
  
  $(window).resize(function(){
    var bottomPositionN = $(window).height();
    $('#content_derecha').height(bottomPositionN); //the same div resizing its position when the window is resized
  
  
  });
  
  //Here starts the evaulation to make the div sticky
  
  var footerFreno = $('.stop').offset().top; // returns the stop on top
  var stickyTop = $('.sticky').offset().top; // returns the stop on bottom. I have another div on footer with the class .stop
  
  
  if (!!$('.sticky').offset()) { //first the code verify if the sticky class exists
  
  //here I have a function to verify if the scroll position is between the values I need 
  
      function verificaRango(x, n, m){ 
        if (x &gt;= n &amp;&amp; x &lt;= m) 
          { 
            return true; }else 
            { return false; 
            }
  
      }
  
      $(window).scroll(function(){ // Here I capture in a variable the position of the scroll
  
        //Here I calculate the bottom of the sticky and auto reize the div
        var arribaValor = $('.sticky').offset().top
        var altoValor = $('.sticky').height();
        var posicionFreno = arribaValor + altoValor;
        var windowTop = $(window).scrollTop(); // the position of the scrollbar 
        var posFreno = footerFreno-altoValor;
  
        var semaforo = verificaRango(windowTop,stickyTop,posFreno); // I store in a variable named "semaforo" the result of the range verification to finally compare it in an if statement...
  
        if (semaforo == true){ // I finally set the position fixed or static according the position nof the div...
            $('.sticky').css({ position: 'fixed', top: 0 }); 
            }
            else {
                $('.sticky').css('position','static');
            }
  
      });
  
    }
  
  
  });
  
  
  
  &lt;/script&gt;
  </code></pre>