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

我需要设置一个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;

      }

  });     

});

不幸的是，只有当滑动面板设置为“位置：固定”时，这才起作用——这意味着页面一滚动，面板（如果打开）就会随之关闭。如何设置相同的内容，但确保面板与相关的div保持一致

下面是一个快速的JSFIDLE来展示它当前的工作方式：（只需单击图像，然后向下滚动查看问题）

---

干杯

如果在下面的类中将其更改为

位置：绝对

，则效果良好

.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;
}   

---

见演示

如果在下面的类中将其更改为

位置：绝对

，则效果良好

.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;
}   

---

见演示

在JSFIDLE中使用当前脚本进行演示。。。除了原来的问题之外，slideUp（）似乎是隐藏一个对象而不是暴露它——我认为有一种方法可以扭转这种行为，但我无法让它工作。如果你有什么想法，可以在JSFIDLE上给我们看看吗？谢谢在JSFIDLE中使用当前脚本进行演示。。。除了原来的问题之外，slideUp（）似乎是隐藏一个对象而不是暴露它——我认为有一种方法可以扭转这种行为，但我无法让它工作。如果你有什么想法，可以在JSFIDLE上给我们看看吗？谢谢很好，简单的回答。谢谢尼廷。你是一位绅士和学者。回答得好，简单。谢谢尼廷。你是一位绅士和学者。