Question

我正试图为我的网络应用程序设计一个可折叠/可隐藏的侧边栏，而Facebook的聊天/事件代码却徒劳无功。它需要有两个独立的部分，垂直分开，并且都可以独立滚动。

我试图使用jakiestfu的Snap.js插件来实现这一点。 https://github.com/jakiestfu/Snap.js/

虽然效果很好，但它会将我页面上的内容移出视图，并因CSS position: fixed而导致transform: tranlate3d()标题元素中断。

由于这些CSS问题没有得到很好的修复，我想知道是否有人知道模仿Facebook Chat / Event Ticker边栏功能的解决方案。

Answer 1

我已经做了类似的事情，使用CSS3调整固定侧边栏（我的左侧），并在侧边栏尺寸改变时调整主页边距。您可以先在侧边栏上执行类似的操作，然后以相同的方式将侧边栏分成两部分。

var sizeme = 200,
    sizeItBro = function () {
      if ($("#sidebar").width() != sizeme) {
        sizeme = $("#sidebar").width() + 40;
        $("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
      }
    };
window.setInterval(sizeItBro, 150);

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body {
  margin:0;
  padding:0;
}
#main {
  margin-left:200px;
  min-height:100%;
  padding:20px;
}
#sidebar {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  background:#ffa;
  width:200px;
  min-width:100px;
  max-width:500px;
  resize:horizontal;
  overflow:auto;
  border-right:2px ridge #fe9;
  padding:20px;
}
#tophalf {
  background:#fe9;
  height:300px;
  min-height:100px;
  max-height:500px;
  resize:vertical;
  overflow:auto;
  border-bottom:2px ridge #fe9;
  margin:-20px -20px 20px;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
    <div id="tophalf">Sidebar A</div>
    <p>Sidebar B</p>
</div>

如何像Facebook的“聊天/事件代码”那样制作可调整大小，可滚动的侧边栏？

1 个答案: