javascript - reveal image on scroll -

I am trying to reveal an image by scrolling on a px through a PX base. Similarly, the red line on this site is animated, the image must be hidden in the same manor, so if the user scrolls, they will see the lower line

I think I'm getting closer , But my javascript is not much above the nose. Here's a URL that I've done so far, and here's my script. Any help would be greatly appreciated, thanks!

  init (); / * ========== init calls all custom functions ========== * / function init () {$ (window) .on ("scroll", scrolling) ; Console.log ("works init"); } / * ========== ================================== Scroll = ========= * / function getScrollTop () {if (typeof pageY osstate! = 'Undefined') {// Most browsers excluding IE9 browsers return # 9 YOffset; } And {var B = document. Body; // IE 'quirks' var d = document.documentElement; // IE with doctype D = (D.clientHeight)? D: B; Return D.scrollTop; }} / * ============================================ Scrolling Ceremony ========== * / Focus scrolling () {console.log (getScrollTop ()); If (getScrollTop ()> 64) {addHeight (); }} / * ========== ================================ Add height " For "fuckinLine" line ========== * function / addHeight () {$ (window) .on ("scroll", function () {var i = 0, line $ () =, while (I <209) {line.css ("height", i ++ + "px"); event.prevent default (); console.log ("addHeight works");}}); } / * ================================ /    < P> 
  after 
 
 Your problem lies here:  
  function addHeight () {$ (window) .on (" scroll ", Function () {var i = 0, line $ (". FuckinLine ") =, while (i & lt; 209) {line.css (" height ", i ++ +" pixels "); event.preventDefault (); Console.log ("adhite works");}}); }   
 You have already set an event for  $ (window) .on ("scroll", function () {init function)  . Essentially the addHeight function was scrolling window twice every time  
 This should work for you:.  
  / * ========== Scroll function ========== * / Scroll function ({console.log (getScrollTop ()); AddHeight (getScrollTop ()) ;. // great place for addwidth to make logic move move horizontally} / * ======================================== ============= To add height, line = ========= * Function addHeight (newHeight) {$ ("fuckinLine.") CSS ("height", NewHeight + "pixels").} / * ======================================= ================================== Maximum height after a scroll We only want to expand 1px for each pixel at the bottom of the scrolled window.