1

我需要设置一个 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/（只需单击图像然后向下滚动以查看问题）...

干杯!

4

1 回答 1

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/

于 2012-08-22T11:05:02.700 回答