大图像div底部的jquery向上滑动面板

Question

我需要设置一个 jquery 函数，使面板在单击 div 时从 div 的底部向上滑动。我目前拥有的是:

    $(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;

      }

  });     

});

不幸的是，这仅在滑动面板设置为 position: fixed 时有效——这意味着一旦页面滚动，面板(如果打开)就会随之关闭。我如何设置相同的东西，但确保面板与关联的 div 保持一致？

这是一个快速的 jsfiddle 来展示它当前是如何工作的:http://jsfiddle.net/nAX43/5/ (只需单击图像然后向下滚动即可查看问题)...

干杯!

Answer 1

如果在下面的类中将其更改为 position: absolute ，它会正常工作，

.header-controls {
    position: absolute;
    top:400px;
    width: 100%;
    height:0;
    background-color:rgba(42, 42, 42, 0.5);
    color:#ccc;
    z-index: 5000;
    display:none;
}   

查看演示。 http://jsfiddle.net/nAX43/7/