Fill background-color gradually based on the scroll position

Question

I have a div and want to have it's background color filled based the scroll position from top. Below is my code -

HTML

<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<div id='Div'> 

</div>

<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

J-query

$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
   if (w > 5) {
         $('#Div').animate({ width: '100%' }, 1000);
   } else {
        $('#Div').animate({ width: '0%' }, 1000);
   }

}); 

This is running well, but I found there is a delay in the response time. Filling is not happening quickly based on the cursor position as I need to wait for few seconds to see the filling starts.

Fiddle - http://jsfiddle.net/bogaso/5r3afz7n/11/

Is there any way to make the response time instantaneous?

Any help will be highly appreciated.

Answer 1

Concept

Define two named animations using css @keyframes rules, one to expand the color bar, one to shrink it. Contingent on the scroll position, start the proper animation. In order to select the right one and to restrict the animation start on crossing the scroll offset threshold, a css class colorized is introduced to record state ( in this case: scroll offset > 5 ). Only if the state has changed, an animation is started. The combination of current scroll offset and presence/absence of class colorize determine which animation to select.

Jquery is not needed to manage the animation, the DOM API does suffice.

See it in action at this fiddle .

Code

HTML

<div><!-- ... long text .....></div>
<div id='Div'>

</div>
<div><!-- ... even longer text .....></div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

@keyframes colorize {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes decolorize {
  from { width: 100%; }
  to   { width: 0%; }
}

JS

$(window).scroll(function(){
   let w = Math.floor( $(window).scrollTop() );
   let e = document.querySelector('#Div');

   if (w > 5) {
       if (! e.classList.contains("colorized")) {
           // Adjust the scrolling state proxy
           e.classList.add("colorized");

           // Animation name. Links the code to the CSS spec of start/end values of the animated attribute
           e.style.setProperty ( 'animation-name', 'colorize' );

           // Animation starts immediately
           e.style.setProperty ( 'animation-delay', '0s' );

           // It takes that long for the complete animation to complete. 
           e.style.setProperty ( 'animation-duration', '2s' );

           // The final state of the animated attribute persists.
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );

           // The animation is run exactly once for each triggering event
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   } else {
       if (e.classList.contains("colorized")) {
           e.classList.remove("colorized");
           e.style.setProperty ( 'animation-name', 'decolorize' );
           e.style.setProperty ( 'animation-delay', '0s' );
           e.style.setProperty ( 'animation-duration', '2s' );
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   }
}); 

Extension

In the version shown the colored bar jumps to full width when the decolorize animation starts. Visually this is not appealing if the inverse colorize animation is in progress. A more sophisticated solution would read the current width of the color bar div and set the start value of the respective @keyframe animation accordingly.