1

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.

egr103
  • 3,858
  • 15
  • 68
  • 119
  • Check this out for info on detecting scroll down: http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event – Hawkeyecoder23 Sep 04 '14 at 14:31

1 Answers1

1

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

tmcw
  • 11,536
  • 3
  • 36
  • 45
  • Thats a good start thanks! How can I prevent the arrow going up the page when I hit the bottom of the page? Also, I notice that when you scroll back up the line reduces, how can I kill the event when the bottom of the page is reached? This is so the line just stays visible when it reaches the end – egr103 Sep 04 '14 at 14:39
  • 1
    At this point I'd recommend you crack open [Eloquent JavaScript](http://eloquentjavascript.net/) and tinker with learning variables and conditional statements. – tmcw Sep 04 '14 at 14:44