javascript - 使有序的 Bootstrap 列 float 在屏幕顶部

Question

我有一个棘手的小问题，我无法解决。

请参阅http://jsfiddle.net/KKczd/供引用。

场景:我有两个 bootstrap 有序列:在大屏幕上，它们相邻两个，在较小的屏幕上，右边的列在左列上方流动。

<div class="row">
    <h1>Header section</h1>
</div>
<div class="row">
    <div class="col-md-3 col-md-push-9" id="right">...</div>
    <div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>

此基本布局和功能完美运行。

目标: 对于大屏幕，当页面向下滚动时，我希望右侧的列始终位于页面顶部。对于小屏幕，我希望右栏(现在是第一行)保持在顶部，内容在其下方随着内容向上滚动而滚动。

问题: 我写了一些 javascript，它似乎只会让右栏变得越来越低 - 它对较小屏幕宽度的部分没有影响 - 除了一些神奇的消失。

我玩过偏移量和重置偏移量，我也尝试过使用一些 css 定位，但它变得越来越骇人听闻。此外，我尝试使用尽可能多的默认 Bootstrap 样式，并尽可能少地使用定位技巧。

这甚至可以做到吗？

Answer 1

目标:

{1}[对于大屏幕，当页面向下滚动时，我希望右侧的列始终位于页面顶部]。

{2}[对于小屏幕，我希望右栏(现在是第一行)保持在顶部，内容在其下方随着内容向上滚动而滚动。]

在 Bootstrap 中 website他们本身使用了您所需的概念{1}，对右列使用 class = 'affix'，

对于 {2} ，我有一个想法，在屏幕顶部创建一个导航栏并设置 class = 'navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md ' 并在该导航栏中提供相同的右列内容，在右列中使用类 = 'visible-lg visible-md hidden-sm hidden-xs'。当屏幕尺寸为小屏时，隐藏右栏内容，并在顶部显示导航栏内容。

希望这对您有用，谢谢。