css - 在 Bootstrap 4 中，如何在滚动时将非导航栏 div 粘在窗口顶部？

Question

我的内容窗口有以下 div 结构，使用 BS4 框架:

<div class="container-fluid">
 ...
  <div class="row">
   ... 
    <div class="container">
     ...
       <div class="row row-grid">
        ...
         <div class="col-8"> <!-- my left sided content, long block of cards-->
         ...
         <div class="col-4"> <!-- my right sided card-block that I need to be sticky and follow the left as user scrolls down-->

我在文档中看到 nav-bar 有一个 .sticky-top 类 - 但是当我尝试在我的示例中使用它时，事情变得不稳定。

当用户滚动查看 col-8 中的内容时，如何让我的 col-4 div 粘在浏览器窗口的顶部分区？

澄清我的左右内容 div 位于其他静态内容下，例如导航栏和标题 block 。所以在页面加载时，正确的(粘性)div 应该在它的原始位置，并且只有在滚动超出它的可见性时才会粘在窗口的顶部。我已经更新了 fiddle 以显示我的意思。

Fiddle

Answer 1

使用位置:固定的css属性

CSS

.fixed-div{
  position : fixed;
  top: 0;
  right: 0;
}