javascript - 是否可以在 Bootstrap 中做一个部分折叠的侧边栏

Question

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

我遇到的问题是，在考虑 Bootstrap 的同时，我无法弄清楚如何进行这项工作，因为对于宽屏，侧边栏需要固定在最左边(或右边)...即不是 boostrap 部分的一部分......而对于平板电脑 View ，例如我认为侧边栏需要占用一个或多个列(否则我需要调整整个页面上的主体填充)，其中我可以，但我希望有一些经过实践检验的方法。我确信我已经看到这种技术的使用，但我找不到它的例子。有谁知道如何解决这个问题，或者它是否可能。

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

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