Bootstrap 4 粘顶停止工作答案

【问题标题】：Bootstrap 4 sticky-top stops workingBootstrap 4 粘顶停止工作
【发布时间】：2018-06-25 05:06:14
【问题描述】：

我在 Bootstrap 的卡片上使用sticky-top 功能，因为用户滚动他们会跟随。但是我发现了一种奇怪的行为，其中一列中的卡片会变得“不粘”，因为用户会越过该列中的最后一张卡片。

当我为这个问题编写一个示例小提琴时，我发现它按预期工作：

as you scroll here, a card in middle column keeps following

所以我直接从我的项目中举了一个例子并清理了它：

here the card in middle column stops following as soon as it goes past last card

我不认为这是一个错误，但我不确定是什么破坏了 sticky-top 功能。我怎样才能防止这种情况发生？

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

默认情况下，Bootstrap 列设置为其父元素高度的 100%。通过将第二列中的卡片包装在一个额外的 div 元素中，您将“.sticky-top”类引用的父容器从 Bootstrap 列更改为“.tags”div。如果您想保留“.tags” div，请在您的 CSS 文件中创建一个规则，使其与其父列的高度匹配：

.tags {
  height: 100%;
}

或者只是在您的开头“.tags” div 中使用 Bootstrap “.h-100” 类来完成同样的事情：

<div class="tags h-100">

编辑：正如“ajax333221”所示（jsfiddle.net/8pLfg5n1），前面的两个解决方案导致“.tags”div 溢出其父容器。发生这种情况是因为第二列中的顶部卡片位于“.tags”div 之外。因此，分配给“.tags”的父列高度开始于第一张卡片的结束位置，而不是列的顶部。

由于许多 Bootstrap 4 功能已经需要 jQuery 库，因此可以在此处使用它来计算并为“.tags” div 分配自定义高度以适应父容器中的剩余空间：

$(document).ready(function(){
    var colHeight;
    //Get column height
    $('.tags').each(function(){ 
      colHeight = $(this).parent().height();
    });
    //Subtract height of cards preceding .tags div
    $('.topCard').each(function(){
      colHeight -= $(this).height();
    });
    /*Set .tags div height to remaining space in 
    column to prevent overflow*/
    $('.tags').each(function(){
      $(this).css('height', colHeight);
    });
 });

该脚本使用了一个“.topCard”类，我将它添加到“.tags”上方同一列中的可见卡片中，以便区分它们。

<div class="card bg-primary w-100 topCard">

这里是“ajax333221”提供的demo的更新版本：https://jsfiddle.net/8pLfg5n1/33/

【讨论】：

在添加了一些 bg 颜色以查看其行为方式后，我注意到该列似乎在使用这些 100% 解决方案中的任何一个时都超出了表格（它停在屏幕底部）jsfiddle.net/8pLfg5n1跨度>
这个解决方案对我不起作用，因为添加 h-100 并不能解决高度问题，但这给了我一个想法——添加一个样式“height: fit-content;”现在它正在获得我想要的合适尺寸和粘性顶部的作品。

【解决方案2】：

好的，我在这里呆了一段时间，因为我也很好奇。

在您的代码中，您有 <div class="tags">，它不允许您的粘性元素走得更远，因为它包裹了您的整个列并且还有其他 position。

This是删除div.tags后的样子。

【讨论】：