左侧粘滞的div，向右滚动

Question

我一直在寻找投资组合的想法，我遇到了一个简单而美观的设计。我现在迷失了如何实现这种布局，特别是它的粘贴元素。我没有自己的代码可供比较，但有人可以帮我弄清楚它是如何工作的吗？谢谢！

http://melaniedaveid.com/

另外：我可以让这个概念适用于一个部分，而不是一秒钟。 （即从“关于”部分到“工作”部分。

Answer 1

您正在寻找的是粘性定位。 有几种方法可以实现类似的东西。可以找到一个很好的概述here。

我认为最简单的解决方案是使用CSS属性position:sticky;。但它在许多浏览器中都不受支持。幸运的是有许多可供选择的填充物，如position--sticky-，所以你现在可以使用它！

那么如何使用position:sticky;？您还需要指定所需的top值，并指定元素将粘贴的顶边距离。所以大多数情况下你希望它是top: 0;。然后 - 滚动时 - 当元素与顶部的距离达到0时，元素会粘住。