title: jquery upwards sliding panel at bottom of large image div
body: <p>I need to set up a jquery function to make a panel to slide up from the bottom of a div when the div is clicked. What i currently have is this:</p>
  
  <pre><code>    $(function() {
  
    var open = false;
  
    $('.header-wrapper').click(function() {
  
        if(open === false) {
            $('.header-controls').show();
            $('.header-controls').animate({top:'350px', height:'50px'}, 800, function() {
              //callback
            }); 
  
            $(this).css('backgroundPosition', 'bottom left');
  
            open = true;
  
        } else {
  
            $('.header-controls').animate({top:'400px', height:'0px'}, 800, function() {
              $('.header-controls').hide(); 
            }); 
            $(this).css('backgroundPosition', 'top left');
  
            open = false;
  
        }
  
    });     
  
  });
  </code></pre>
  
  <p>Unfortunately this only works when the sliding panel is set to position: fixed - which means as soon as the page scrolls, the panel (if open) goes off with it. How can i set the same thing up, but ensuring that the panel stays with the associated div?</p>
  
  <p>Here is a quick jsfiddle to show how it's currently working: <a href="http://jsfiddle.net/nAX43/5/" rel="nofollow">http://jsfiddle.net/nAX43/5/</a> (just click on the image then scroll down to see the problem)...</p>
  
  <p>Cheers! </p>