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/

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

1 个答案: