到达元素时停止的粘性元素

Question

我想在滚动并到达另一个元素的顶部时制作一个固定元素（如粘性）。 fixed元素会增加css的bottom 属性不超过我设置为bound的元素的top（你不能通过点的元素，比如ground）。我做了一支笔，显示了我想要的东西，希望对您有所帮助：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

替换

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

和

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

将元素始终粘在底部。

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 使用顶部而不是底部。

Answer 4

终于找到答案了：

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

解决方案是将 window 的高度添加到增量计算中：

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

感谢所有为这个主题做出贡献的人！

到达元素时停止的粘性元素

Sticky element that stops when reaches a element

javascript

css

jquery

boundary

sticky