Липкий элемент, который останавливается, когда достигает элемента

Question

Я хочу сделать фиксированный элемент (например, липкий), когда прокручиваю и достигаю вершины другого элемента.Фиксированный элемент увеличит свойство bottom у css, чтобы оно не проходило через верх элемента, который я установил как связанный (элемент, который вы не можете пройти через точку, как основание).Я сделал ручку, которая показывает, что я хочу, надеюсь, это поможет: https://codepen.io/vendramini/pen/xNWpPK. Я действительно не знаю, какой расчет мне нужно сделать, чтобы добиться этого.Пожалуйста, помогите мне.

https://codepen.io/vendramini/pen/xNWpPK Лучшее, что я мог сделать, чтобы проиллюстрировать это.

*{
  margin: 0;
  padding: 0;
}

section{
  height: 100vh;
  width: 100vw;
  background: #eee;
  position: relative;
  max-width: 100%;
}

.a{
  background: #faa;
}

.b{
  background: #ffa;
}

.c{
  background: #afa;
}

.d{
  background: #aaf;
}

.sticky{
  width: 100%;
  position: fixed;
  height: 100px;
  background: blue;
  opacity: 0.5;
  bottom: 0;
  z-index: 1;
}

.ground{
    height: 2000px;
    background: black;
}

//jQuery required

(function($){

  $('[data-bound]').each(function(){

    const $elem = $(this);
    const $bound = $( $elem.data('bound') );

    $(window).scroll(function(){

      const scrollTop = $(window).scrollTop();
      const boundTop = $bound.offset().top;
      const boundHeight = $bound.height();
      const delta = (scrollTop - boundTop); //+ boundHeight;

      console.log({
        scrollTop,
        boundTop,
        delta,
      });

      if( delta > 0 ){
        $elem.css('bottom', delta);
      }
      else{
        $elem.removeAttr('style');
      }

    });


  });

})(jQuery);

<div class="sticky" data-bound="#ground"></div>

<section class="a"></section>
<section class="b"></section>
<section class="c"></section>
<section class="d"></section>
<footer class="ground" id="ground"></footer>
<section class="a"></section>
<section class="b"></section>
<section class="c"></section>
<section class="d"></section>

Я ожидаю, что у меня будет фиксированный элемент, который неНе пропустите элемент земли.Вот и все.

Answer 1

Я наконец нашел ответ:

https://codepen.io/vendramini/pen/xNWpPK

Решение - добавить высоту окна в расчет дельты:

const windowHeight = $(window).height();
const delta = (scrollTop - boundTop) + windowHeight;

Спасибо всем, кто способствовал этой теме!

Answer 2

Я не уверен, что точно понимаю, что вы хотите, но я думаю, что вы можете достичь этого только с помощью CSS, используя position: sticky в нижнем колонтитуле.

https://codepen.io/anon/pen/jozzPq

релевантныйизменения:

добавьте обертку к элементам с закрепленным нижним колонтитулом:

<div>
  <section class="a"></section>
  <section class="b"></section>
  <section class="c"></section>
  <section class="d"></section>
  <footer class="ground" id="ground">   </footer>
</div>

поместите нижний колонтитул в нижнее положение и установите его на закрепленный

.ground{
    height: 100px;
    background: black;
    position: sticky;
    bottom: 0;
}

ПроверьтеCodepen вызывает много CSS и (все) JS могут быть удалены.

Answer 3

То, что я хочу, это то, что делает UIKit: https://getuikit.com/docs/sticky

Но проблема в том, что UIKit использует top вместо bottom.

Answer 4

Заменить

      if( delta > 0 ){
        $elem.css('bottom', delta);
      }
      else{
        $elem.removeAttr('style');
      }

с

$elem.css('bottom', 0);

всегда прикреплять элемент к основанию.