CODEWITHSUNDEEP
javascriptjquerycssscroll
egr103
egr103

Reputation: 4008

Make a line grow down the page as you scroll

I'd like to make a span element grow down the page as you scroll down (not up) but I'd like to start this when it comes into the viewport and after it fixes in place. I'm using this plugin to stick the span's in place: http://stickyjs.com/ then after they have fixed I'd like the red vertical line (starting from the dot) to grow larger down the page as you scroll.

This fixes the spans in place:

$("#circle").sticky({topSpacing:170});
$("#vertical-divider").sticky({topSpacing:182}); // #vertical-divider is the element I'd like to grow

Here's my JS Fiddle: http://jsfiddle.net/u5c51ubk/2/ - This is code with the fixed position working correctly however, I cannot get the scrollevent in order to make the span larger. Any help would be appreciated.

Upvotes: 1

Views: 2163

Answers (1)

tmcw
tmcw

Reputation: 11882

Use scrollTop and change the CSS property: http://jsfiddle.net/u5c51ubk/3/

Upvotes: 1

Related Questions