Css 在Bootstrap4中，如何使非导航条div在滚动时粘在窗口顶部？

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

<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

div中的内容时，如何让我的

col-4

div粘贴到浏览器窗口的顶部

澄清 我的右侧和左侧内容div位于其他静态内容下，如导航栏和标题块。因此，在页面加载时，右（粘滞）div应该处于其本机位置，并且只有在滚动超出其可见范围时才粘在窗口顶部。我已经更新了小提琴来表达我的意思

---

使用位置：固定css属性

CSS

---

你基本上是在

位置：sticky；不幸的是，浏览器支持仍然很难实现。如果您只关心支持它的浏览器，则语法类似于：

.sticky // or whatever selector you want to use
{
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
}

有关更好的解释，请参见，但简单地说，
top
的值是从视口顶部（或最近定位的容器）到元素从静态位置切换到固定位置的距离。这与Bootstrap3中的粘贴插件提供的效果相同

.sticky // or whatever selector you want to use
{
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
}