当元素的底部碰到视口的底部时，将其定位为粘性

Question

我的部分始终为100vh或更多：

HTML：

<div class="wrapper">
    <div class="section-sticky">...</div>
    <div class="rest-of-content">...</div>
</div>

CSS：

.section-sticky {
    position: sticky;
    min-height: 100vh;
    top: 0;
}

当部分的底部碰到视口的底部时，我想将其固定在屏幕上。到目前为止，我正在通过计算负top值并将其应用于JS来实现此目的：

var windowHeight = $(window).height();
var sectionHeight = $('.section-sticky').height();
var offset = windowHeight - sectionHeight;

if (offset < 0) {
  $('.section-sticky').css('top', offset);
}

但是我觉得这太过分了，应该有一个纯CSS解决方案。有任何想法吗？

PS：bottom: 0;不起作用。 PSS：一个有效的示例：https://codepen.io/Deka87/pen/pZoVpx。