滑动固定的div

Question

我查看了一个示例，其中有一个锚点，该锚点上的onclick事件显示了一个隐藏的div，如下所示：http://jsfiddle.net/apaul34208/SW6Mv/6/

但是我想在页面底部有一个固定的面板，从浏览器的一侧到另一侧。基本上100％宽度像这样：

当我按下按钮（半圈）时，面板滑出。

但是，由于我的面板固定在页面底部，所以：

#panel {
  position: fixed;
  left:0;
  bottom:0;
  z-index:1000;
  width:100%;
  background:#FFFFFF;
}

从jquery滑出来不会工作。主要的问题是因为它固定在底部，即使我可以滑动第二个div，主div总是在它的顶部，而它应该滑动。如何让我的div保持在页面底部，但是当按下按钮时它会向上滑动，因为第二个div会出现在它旁边。

Answer 1

以下示例代码可以帮助您。结帐jsfiddle代码。 示例代码：http://jsfiddle.net/Q3yR8/1/

HTML代码：

<section id="header-bar" class="txt-highlight-color bg-color bg-pattern">
  <span id="close-bar" class="hide-bar">close button</span>
</section>

CSS代码：

#header-bar {position:fixed; bottom:0; left:0; width:200px; background-color:grey; height:50px;}
#close-bar { position:absolute; top:-20px; background:red; color:white;}

JS代码

var speed = 300;
        $('#close-bar').on('click', function(){

            var $$ = $(this);

            if( $$.is('.hide-bar') ){
                $('#header-bar').animate({bottom:-50}, speed);
                $$.removeClass('hide-bar')
            } else {
                $('#header-bar').animate({bottom:0}, speed);
                $$.addClass('hide-bar')
            }

        });

Answer 2

您可以将bottom属性设置为-100px（例如）以隐藏元素，然后使用.animate()显示它：

$('.circle').on('click', function(){
    $('#panel').animate({bottom: '100px'});
});