一旦到达屏幕顶部就修复元素

Question

我真的不知道怎么说这个，我发现另外一个类似的问题，但它的功能和解决方案与我的情况并不相关。这是我正在谈论的内容的视觉效果。

如果您访问http://merkd.com/events，您会看到一系列带有白色文字的大型绿色横幅。他们说“开始即将”，“事件聚焦”和“申诉”。

当您向下滚动并且STARTING SOON横幅到达屏幕顶部时，它应该固定，并且在您向上滚动之前不再移动。所有其他横幅都应该这样做，这样如果你滚动到页面的底部，你就会有一堆叠在一起的所有3个横幅，如：

开始 事件聚焦 请愿

我想这样做，所以我可以将横幅链接回上面的扩展内容，让用户更容易跳转。我甚至不确定我会怎么做。我假设我需要将jQuery函数绑定到横幅并检测它在屏幕上的位置，然后添加CSS来修复它，但我希望有一种更简单的方法，因为我对jQuery语法不是很好。

Answer 1

jQuery stickem库就是你想要的。

以下是演示：{{3}}

在您的工作中，您需要使用background：ribbon.full.png向div添加className 例如：class =＆＃34; ribbon-full＆＃34;

然后，这就是你如何使用它：

<script src="jquery.stickem.js"></script>
<script>
    $(document).ready(function() {
        $('.ribbon-full').stickem();
    });
</script>