javascript - 到达某个元素时停止的粘性元素

Question

当我滚动并到达另一个元素的顶部时，我想制作一个固定元素(例如粘性元素)。固定元素会增加css的底部属性，以不通过我设置为绑定(bind)的元素的顶部(您无法通过点的元素，例如地面)。我做了一支笔，显示了我想要的东西，希望有帮助: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

我不确定我是否完全理解您想要的内容，但我认为您可以仅使用 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。