Bootstrap的粘性右侧边栏[重复]

【问题标题】：Sticky right sidebar with Bootstrap [duplicate]Bootstrap的粘性右侧边栏[重复]
【发布时间】：2017-09-28 03:04:03
【问题描述】：

我正在尝试在 Bootstrap 中制作一个类似于 Facebook 的粘性侧边栏。我试过使用“词缀”，但侧边栏的内容只是向左移动，与主要内容重叠。我尝试添加“right:0;”，但它会溢出网格系统。

到目前为止，我的代码非常基础，因为开发依赖于这个固定的右侧边栏功能，但这里是：

<div class="container">
    <div class="row">
        <div class="col-md-9">
            A bunch of Lorem Ipsum text.
        </div>
        <div class="col-md-3 affix">
            <h1>Sticky sidebar</h1>
        </div>
    </div>
</div>

有人对如何进行这项工作有任何建议吗？

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

body {
  background: pink;
}

.sticky {
  background: white;
  position: fixed;
  top: 0;
  right: 0;
}

<body>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
</body>

<div class="sticky">
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
</div>

你想要这样的东西吗？

您使用 css positon:fixed; 和 top:0;right:0; 将 div 粘贴在右上角

【讨论】：