底部滑动面板 - jQuery 和 CSS3

Question

我想创建一个像Simple Sidebar 这样的上滑面板，但它需要从底部向上滑动，并且应该可以调整到 2 个高度，并且顶部的内容可以自我调整，这应该使该分区可以滚动。

我已经根据Simple Sidebar 设计了代码，但对我来说，它并没有按照需要的方式工作，它覆盖在文本上而不是压缩高度。

第 1 阶段（点击 h 时）

第 2 阶段（点击 h1 时）

HTML

   <div id="down-wrapper">
      <div id="top-content-wrapper">
       ....
       <button href="#" id="down-toggle">H</button>
       <button href="#" id="down-toggle1">H1</button>
      </div>
      <div id="downbar-wrapper">Click</div>
   </div>

JS

$(function(){
    $("#down-toggle").click(function(e) {
        e.preventDefault();
        $("#down-wrapper").toggleClass("toggled");
    });

    $("#down-toggle1").click(function(e) {
        e.preventDefault();
        $("#down-wrapper").toggleClass("toggled1");
    });


})

我无法编写我的 CSS，所有内容都可以在 plnkr 链接http://plnkr.co/edit/uX5qqQgVBZKEgARBeG23?p=preview中找到

Answer 1

您的 #down-wrapper 中有 2 个绝对元素。但是当您点击任一按钮时，您忘记调整 #top-content-wrapper 的高度。

页面上的溢出文本也会添加滚动条。因此，您需要在 #top-content-wrapper 上添加一个溢出滚动属性，该属性将在显示 #downbar-wrapper 时接管您的页面滚动条。 p>

在您的 Plunker CSS 文件中更改这些：

#down-wrapper.toggled #top-content-wrapper {
    position: absolute;
    margin-top:0;
}

#down-wrapper.toggled1 #top-content-wrapper {
    position: absolute;
    margin-top:0;
}

进入：

#down-wrapper.toggled #top-content-wrapper {
    position: absolute;
    margin-top:0;
    height:55%;
    overflow-y:scroll;
}

#down-wrapper.toggled1 #top-content-wrapper {
    position: absolute;
    margin-top:0;
    height:10%;
    overflow-y:scroll;

}