底部幻灯片 - jQuery＆amp; 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 ，它就会接管您的页面滚动条。

在 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;

}