Question

当我滚动并到达另一个元素的顶部时，我想制作一个固定元素（如粘性）。固定元素将增加css的bottom属性，以不超过我设置为绑定的元素的顶部（您不能通过该点的元素，例如地面）。我用钢笔显示了我想要的东西，希望对您有所帮助：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

替换

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

与

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

将元素始终粘贴在底部。

Answer 3

我不确定我确切地了解您想要什么，但是我认为仅使用CSS在页脚上使用position: sticky即可实现。

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

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

4 个答案: