0

我正在尝试为我的 Web 应用程序设计一个可折叠/可隐藏的侧边栏，但 Facebook 的 Chat/Event Ticker 却徒劳无功。它需要有两个独立的部分，垂直分开，并且都可以独立滚动。

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

虽然这很好用，但它会将我页面上的内容移出视线，并position: fixed由于 CSS 破坏了我的标题元素transform: tranlate3d()。

由于这些 CSS 问题没有很好的解决方案，我想知道是否有人知道模仿 Facebook 聊天/事件代码侧栏功能的解决方案。

4

1 回答 1

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>

于 2013-09-04T18:38:58.547 回答