Question

我正在尝试构建一个Bootstrap页面，其中有一个侧栏在滚动时部分折叠...它应该折叠为更窄版本的自身（例如图标而不是文本样式）并且这种折叠将在滚动时发生，然后可以通过单击元素打开它的全宽。

我遇到的问题是我无法弄清楚如何在考虑引导程序的情况下完成这项工作，因为对于宽屏，侧边栏需要固定在最左边（或右边）...即不是boostrap部分的一部分...而对于平板电脑视图，例如我假设侧边栏需要占用一个或多个列（否则我需要调整整个页面上的主体填充），我能做到，但我希望有一些经过试验和测试的方法。我确信我已经看过这种技术，但我找不到它的一个例子。有没有人知道如何解决问题，或者是否有可能。

Answer 1

HTML：

<div id="wrapper">
  <div id="sidebar">
    .....
  </div>
</div>

JS：

$( window ).scroll(function() {
    $("#wrapper").toggleClass("active");
});

CSS：

#sidebar{
  position: fixed;
  left: 0;
  width: 200px;
}
#wrapper.active #sidebar{
  width: 100px;  
}

这将在窗口滚动上切换侧边栏的宽度。您还可以将窗口滚动功能添加到侧边栏鼠标单击事件侦听器。

是否可以在引导程序中执行部分折叠的侧边栏

1 个答案: