Bootstrap 4 sticky-top перестает работать

Question

Я использую функцию sticky-top на картах Bootstrap, так как пользователь прокручивает их.Но я обнаружил странное поведение, при котором карточки в одном столбце становились «неприлипающими», когда пользователь проходил мимо последней карточки в этом столбце.

Когда я писал пример скрипта для этого вопроса, я нашелона работала так, как задумано:

, когда вы прокручиваете здесь, карта в средней колонке продолжает следовать

Так что я взял пример прямо из своего проекта и очистил его:

здесь карта в средней колонке перестает следовать, как только она проходит мимо последней карты

Я не думаю, что это ошибка, но я не уверен, что этонарушение функции sticky-top.Как я могу предотвратить это?

Answer 1

По умолчанию столбцы Bootstrap установлены на 100% высоты их родительского элемента.Оборачивая карточки во втором столбце в дополнительный элемент div, вы изменили родительский контейнер, на который ссылается класс «.sticky-top» из столбца Bootstrap, на div «.tags».Если вы хотите сохранить div ".tags", создайте правило в своем CSS-файле, чтобы оно соответствовало высоте его родительского столбца:

.tags {
  height: 100%;
}

Или просто используйте Bootstrap ".h-100div "class in your open"), два предыдущих решения приводят к тому, что div ".tags" переполняет родительский контейнер.Это происходит потому, что верхняя карта во втором столбце находится за пределами тега ".tags".Таким образом, высота родительского столбца, присвоенная значению «.tags», начинается там, где заканчивается первая карта, а не в верхней части столбца.

Поскольку библиотека jQuery уже необходима для многих функций Bootstrap 4, ее можно использоватьздесь, чтобы вычислить и присвоить произвольную высоту элементу «.tags», чтобы он соответствовал оставшемуся пространству в родительском контейнере:

$(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/

Answer 2

Хорошо, я провожу здесь некоторое время, потому что мне тоже было любопытно.

В вашем коде у вас есть <div class="tags">, который запрещает вашим липким элементам идти дальше, потому что он обернул всю вашу колонку и имел другие position.

Это , как это выглядит после удаления div.tags.