Celina Peralta Celina Peralta - 2 months ago 10x
jQuery Question

Sticky div on left, scroll on right

I was looking for portfolio ideas and I came across this particular one with a simple but beautiful design. I'm currently lost as to how to implement this layout, specifically the sticking element of it. I don't have any of my own code to compare, but can someone help me figure out how it works? Thanks!


Also: I can get the concept to work for one section, just not a second. (i.e. going from the "About" section to the "Work" section.


What you're looking for is sticky positioning. There are several approaches to implement something like that. A good overview can be found here.

I think the easiest solution is to use the CSS property position:sticky;. But it's not supported in many browsers. Fortunately there a number of polyfills to choose from like position--sticky- so you can use it just by now!

So how to use position:sticky;? You also need to specify top value which is required and specifies the distance from the top edge where the element will stick. So mostly you want it to be top: 0;. And then – as you scroll – when the element's distance from the top reaches 0, the element sticks.