twitter-bootstrap - Bootstrap 3RC1 + 侧面板 + Affix

Question

谁能帮我实现一个在使用 Bootstrap v3 RC1 滚动页面时保持可见的横向面板？

这是我的代码 Bootply .

我的问题是，当我向下滚动页面时，面板会缩小，并且我希望它在页面位于顶部时保持大小。如果我为词缀 ( .affix{width:10%} ) 编写和样式，我可以设置宽度。但是，如果我这样做，那么我将不得不为面板设置确切的尺寸。

这是正确的方法吗？

Answer 1

词缀插件根据滚动位置(和偏移)为您的元素设置不同的类。在偏移量之前，这个类将是 affix-top , 在 affix-offset-top 和 affix-offset-bottom 之间，这个类将是 affix . css为affix-top定义的位置将是静态的(默认，另见:http://www.w3schools.com/cssref/pr_class_position.asp)，而 affix 的位置类设置为固定。

当一个元素具有 position:absolute 时，它​​的宽度是其父级的最大宽度。因此，在您的情况下，您的面板获得 col-lg-3 的 100% 宽度(由于 box-sizing: border-box，请参阅 Why did Bootstrap 3 switch to box-sizing: border-box? )。此类的宽度将为 25% (3/12*100) 父级 .container div。 .container 的(最大)宽度取决于屏幕/视口(viewport)的宽度。

带有 position:fixed 的词缀类没有父容器。所以这个元素的 100% 宽度将是视口(viewport)的 100% 减去元素的左侧位置(可用空间的 100%)。

更改视口(viewport)时，.container 的宽度在网格边界之间是固定的(参见:http://getbootstrap.com/css/#overview-container)。因此，您的词缀顶部的大小将在此边界之间固定。始终为 .container 的 25%。将 .affix 类也设置为 25%，它的大小会随流体变化。导致 25% 的视口(viewport)(减去左侧)大多不等于容器的 25%，您的附加元素将具有与类 .affix 不同的宽度。

由于上述原因，附加元素的宽度大多设置为固定的像素值。有关示例，请参见 http://getbootstrap.com/ 上的文档。 .

根据屏幕宽度(使其具有响应性)改变侧面板宽度的最佳方法是以像素为单位的宽度与媒体查询相结合。

例子:

/* Extra small devices (phones, up to 480px) */
/* No media query there is no affix */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { #side-panel { width: 152px; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { #side-panel { width: 208px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { #side-panel { width: 270px; } }

见: http://bootply.com/82661 (请注意，我采用您的 Bootstrap 3.0.0 代码。)

或者使用 jQuery 设置宽度:
这表明宽度取决于 .container，但更喜欢上面的 css 解决方案。

$(document).scroll(function(){
    $('.panel.affix').width(((($('.container').width()+30)/4)-30));
})