Search code examples
javascriptjquerycsssliderslide

How to make a vertical slider that changes with scroll?

I am working on a landing page that requires to slide content from bottom to top. Similar to https://www.google.com/adsense/start/benefits/ custom insight section.

Solution

  • Its not actually scrolling up. The image is sticking to the page like its absolutely positioned till the text column catches up with it. Then it continues. So its like its position: absolute; from a certain coordinate to the end coordinate and then gets its style back.

    So if you use Javascript to apply absolute positioning to an image when you scroll to a <div> and then revert to old css when you scroll past the <div> you will get the effect you want. There are lots of plugins that do this too. I found one here: https://github.com/davist11/jQuery-Stickem

    Check out the demo too to see what I mean.