html - Bootstrap 4 sticky-top 停止工作

Question

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

当我为这个问题写一个示例 fiddle 时，我发现它按预期工作:

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 功能。我怎样才能防止这种情况发生？

Answer 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”提供的演示的更新版本:https://jsfiddle.net/8pLfg5n1/33/