javascript - Bootstrap 3.0 词缀

Question

我想使用 Bootstrap 3.0 和 Affix 将右手 col 固定到窗口顶部(滚动时)。

这是该元素的 html:

<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">

这是CSS:

.right-hand-bar.affix {
    width: 390px;
    position: fixed;
    top: 0px;
    right: 0px;
    margin-top: 110px;
}

在示例中here你会发现一些奇怪的事情正在发生。

• 固定的.right-hand-bar(热门博客文章等)跳到屏幕右侧(由于应用了固定位置)。我真的不想搞乱正确的定位，因为该网站是响应式的。
• 固定栏跳出主容器。
• 我不得不为固定元素添加宽度，但我不想这样做(因为它是响应式的)。
• 我还希望当固定元素的底部触及页脚顶部(或距页脚的偏移值)时，它停止随页面滚动。

任何人都可以帮忙解决这些问题吗？

提前致谢!

Answer 1

包装 .right-hand-bar.affix 样式的媒体查询，因此它们仅适用于桌面版本。无论如何，您都不希望它被固定在小屏幕上。

然后将 position:relative; 添加到 .row 的样式中，.right-hand-bar 将相对于该容器而不是整个页面。