滚动一段时间后，我需要在底部有一个粘性 div

Question

我需要一个仅在完成一定量的滚动后才显示的粘性 div。

我正在使用 REACTJS。 JQUERY 没有帮助

我能够从 starting 获得粘性 div，但我希望在整个 第 1 段 完成后显示 黄色粘性 div滚动。

这就是我得到的

这是我想要的。

当第 1 段显示时



一旦滚动第 1 段
然后我希望粘性 div 像这样显示在底部

P.S：我不被允许显示文本，所以我使用 lorem ipsum 代替。很抱歉给您带来沉重的文字不便。 是的，我在项目中使用 React.js。
请高手帮忙

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 25px;
  font-size: 20px;
}

<p><strong>Paragraph1 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

<p><strong>Paragraph 2 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
<p><strong>Paragraph 3 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

<p><strong>Paragraph 4 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Answer 1

这是 Vanilla JS 解决方案。希望能解决你的问题。

window.addEventListener('scroll', isScrolledIntoView);

function isScrolledIntoView() {
    const el = document.querySelector(".sticky");
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    
    if(isVisible) {
      el.style.opacity = 1;
    } else {
      el.style.opacity = 0;
    }

}

 div.sticky {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      background-color: yellow;
      padding: 25px;
      font-size: 20px;
      opacity: 0;
    }

    <p><strong>Paragraph1 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

    <p><strong>Paragraph 2 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
    <p><strong>Paragraph 3 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

    <div class="sticky">I will stick to the screen when you reach my scroll position</div>

    <p class="test1"><strong>Paragraph 4 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

Answer 2

jQuery.fn.isInViewport = function () {
    //Calc Y-Coordinate of Element
    var elementTop = jQuery(this).offset().top;
    //Adds Y-Coord + Height of Element
    var elementBottom = elementTop + jQuery(this).outerHeight();

    //Calculates current scroll position
    var viewportTop = jQuery(window).scrollTop() + jQuery(this).outerHeight();
    
    //Calculates current scroll position plus height of viewport
    var viewportBottom = viewportTop + jQuery(window).height() - (jQuery(this).outerHeight() * 2);

    //Checks if Element is in Viewport
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

jQuery(document).ready(function() {
  jQuery(window).scroll(function() {
      //Is Element in Viewport?
      if (jQuery('.sticky').isInViewport()) {
          jQuery('.sticky').addClass('fixed');
      }
  });
})

.sticky {
  background-color: yellow;
  padding: 25px;
  font-size: 20px;
}
.sticky.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Paragraph1 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

<p><strong>Paragraph 2 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
<p><strong>Paragraph 3 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

<p><strong>Paragraph 4 <br><br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus a a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

这应该是你想要的（使用 JS 和 jQuery）对不起，如果使用起来有点多，但这就是我现在为你准备的方式。