Как отлепить блок при достижении конца родителя?

Question

[Slovolov]

Всем привет!

Была задача сделать липнущие заголовки, нашел идеальный плагин: https://codepen.io/mike-zarandona/full/Dasnw

Все работает, без дерганий и прочего. НО, блоки липнут друг за другом (судя по всему логика именно такая, что каждый последующий перекрывает предыдущий). Но в нашей верстве это реализовать невозможно, потому что родители генерируются из цикла и никак их не пронумеровать чтобы z-index поиграть и решить с помощью css.

Вопрос: как допилить скрипт, чтобы прилипший элемент отлипал при достижении нижнего края родителя?

Comments

[Максим Тимофеев]

родители генерируются из цикла и никак их не пронумеровать

разрыв логики детектед. Если есть цикл, то как раз пронумеровать проще всего.

А Вы уверенны, что надо тянуть плагин для этого? Мне кажется
position: sticky;
оптимальнее
https://developer.mozilla.org/en-US/docs/Web/CSS/p...

Но в любом случае дайте скрин того что должно получится, не понятно зачем вам z-index

Answer 1

[Slovolov]

Подозреваю что за функцию отлипания отвечает вот эта функция:

function setStickies(howMany) {

			// Step 1:  Calculate how much padding the parent container should get
			var paddingTop = 0;

			// Total the amount of padding of stuck sections
			for (var p = 0; p < howMany; p++) {
				paddingTop += $sections.eq(p).outerHeight(true);
			}

			// Append that height to the parent wrapper
			$sections.eq(0).parent().css('padding-top', paddingTop);


			// Step 2:  Stick the sections to be stuck (heh)
			for (var s = 0; s < $sections.length; s++) {
				if (howMany > 0) {
					$sections.eq(s).addClass('stuck');
					howMany--;
				}
				else {
					$sections.eq(s).removeClass('stuck');
				}
			}
		}