Javascript 当元素的底边滚动到视图中时使其固定

这个可能看起来很复杂，我会尽力解释的

我正试图让一篇连续滚动的文章以与彭博政治（）相同的方式显示，但格式略有不同

我希望当前文章的底部边缘变为粘滞/固定在视口的底部，而新文章则在其顶部滚动，而不是在最后一篇文章滚动之前一直处于静态状态

我已经尝试了一个JSFIDLE，试图说明我要做的事情以及我的意思

<div class="wrapper">
    <article class="article article--one">
        Text text text text text text text text text
    </article>
    <article class="article article--two">
        Text text text text text text text text text
    </article>
</div>

$（窗口）。滚动（函数（）{
$（'.article'）。每个（函数（i）{
变量bottom\u of_object=$（this.position（）.top+$（this.outerHeight（））；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
var height=$（this.outerHeight（）；
var secondheight=$（'.article--two'）.outerHeight（）；
var down=对象的底部；
如果（_窗口的底部_>_对象的底部_）{
$（this.css）({
'位置'：'固定'，
“底部”：“0”，
‘左’：‘16px’，
“右”：“16px”
});
$（'.article--two'）.addClass（'scroll'）；
}    
});     
});

任何帮助都将不胜感激！问这个似乎有点复杂

---

加油

没有经过优化，在移动设备上也不会工作得很好，但它确实做到了

$window=$（window）.on（'scroll'，函数（）{
var scroll=$window.scrollTop（）+$window.height（）；
$（'li'）。每个（函数（i）{
var$el=$（此），
偏移=滚动-$el.offset（）.top-$el.height（）；
$el.children（）.css（'top'，偏移量>0？偏移量：0）；
});
});
正文{
保证金：0；
}
保险商实验室{
位置：相对位置；
显示：块；
文本对齐：居中；
计数器复位：第页；
填充：0；
保证金：0；
}
李{
高度：150vh；
列表样式：无；
背景：绿色；
位置：相对位置；
保证金：0；
填充：0；
}
李：第n个孩子（偶数）{
背景：蓝色；
}
文章{
位置：相对位置；
身高：100%；
宽度：100%；
背景：继承；
}
文章：之前{
计数器增量：第页；
内容：“页面”计数器（第页）；
字号：1.6em；
颜色：白色；
最高：50%；
边缘顶部：-0.5em；
位置：相对位置；
}








我不认为这会很复杂，我只需要了解你想要实现的目标是什么。你想让下一篇文章的标题一直放在页面底部，直到你找到它，还是？@Skatch我只想让下一篇文章一直放在视线之外，直到当前文章完全滚动到视图中。此外，用户应该能够滚动回到第一篇文章的顶部，如果他们愿意的话。。。也许一张照片能更好地解释，或者也许我只需要第二杯咖啡：）周一肯定有点早了！本质上，我想要的是JSFIDLE中到底发生了什么，附带条件是用户应该能够滚动到第一篇文章的顶部，并且它应该可以连续工作无限多篇文章。您希望article
n
以16px的间距正常滚动，您希望article
n-1
固定在底部，拉伸并在左右两侧可见（每个16px）？关于文章
n-2
？对我来说似乎很可靠！谢谢你！