在 Bootstrap 4 中，如何使非导航栏 div 在滚动时粘在窗口顶部？答案

【问题标题】：In Bootstrap 4, how can you make a non-navbar div sticky to the top of the window on scrolling?在 Bootstrap 4 中，如何使非导航栏 div 在滚动时粘在窗口顶部？
【发布时间】：2017-05-09 02:58:14
【问题描述】：

我的内容窗口有以下 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 div 中的内容时，我怎样才能让我的col-4 div 粘在浏览器窗口的顶部？

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

Fiddle

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

使用位置：固定css属性

CSS

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

【讨论】：

【解决方案2】：

你基本上是在追position: sticky;；不幸的是，浏览器支持仍然是somewhat lacking。如果只关心支持它的浏览器，语法类似于：

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

请参阅MDN article for position 以获得更好的解释，但简单地说，top 的值是距元素从静态切换到固定的视口顶部（或最近定位的容器）的距离定位。这与 Bootstrap 3 中的 Affix 插件提供的效果相同。

【讨论】：