title: How to add auto scroll inside bootstrap thumbnail class
body: <p>I am creating a progress bars. I want to show the first three progress bar and hide the next  two, and i should be able to see subject 4 and subject 5 progress bar after scrolling that thumbnail.
  Here is my JSFIDDLE <a href="http://jsfiddle.net/zL0tmqcm/" rel="nofollow">Sample</a> of HTML and CSS.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;                   
      &lt;div class="thumbnail"&gt;
          &lt;div class="thumbnail"&gt;
              &lt;img class="small-image" src="http://marccortez.com/wp-content/uploads/2013/04/reading-small1.jpg"/&gt; 
          &lt;/div&gt;
          &lt;div class="thumbnail"&gt;
              &lt;div class="progress-broad"&gt;
                  &lt;div class="progress-bar progress-bar-success" style="width:70%"&gt;
                  &lt;/div&gt; 
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%"&gt;                                            
                  &lt;/div&gt;
                  &lt;span class="course-progressbar-name"&gt;Mathematics&lt;/span&gt;
                  &lt;span class="course-grade-percentage"&gt;60%&lt;/span&gt;
                  &lt;span class="course-grade-label"&gt;GRADE&lt;/span&gt;     
              &lt;/div&gt;
              &lt;div class="progress-broad"&gt;
                  &lt;div class="progress-bar progress-bar-success" style="width:70%"&gt;
                  &lt;/div&gt; 
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%"&gt;                                            
                  &lt;/div&gt;
                  &lt;span class="course-progressbar-name"&gt;Biology&lt;/span&gt;
                  &lt;span class="course-grade-percentage"&gt;60%&lt;/span&gt;
                  &lt;span class="course-grade-label"&gt;GRADE&lt;/span&gt;     
              &lt;/div&gt;
              &lt;div class="progress-broad"&gt;
                  &lt;div class="progress-bar progress-bar-success" style="width:70%"&gt;
                  &lt;/div&gt; 
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%"&gt;                                            
                  &lt;/div&gt;
                  &lt;span class="course-progressbar-name"&gt;Physics&lt;/span&gt;
                  &lt;span class="course-grade-percentage"&gt;60%&lt;/span&gt;
                  &lt;span class="course-grade-label"&gt;GRADE&lt;/span&gt;     
              &lt;/div&gt;
              &lt;div class="progress-broad"&gt;
                  &lt;div class="progress-bar progress-bar-success" style="width:70%"&gt;
                  &lt;/div&gt; 
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%"&gt;                                            
                  &lt;/div&gt;
                  &lt;span class="course-progressbar-name"&gt;subject4&lt;/span&gt;
                  &lt;span class="course-grade-percentage"&gt;60%&lt;/span&gt;
                  &lt;span class="course-grade-label"&gt;GRADE&lt;/span&gt;     
                  &lt;/div&gt;
              &lt;div class="progress-broad"&gt;
                  &lt;div class="progress-bar progress-bar-success" style="width:70%"&gt;
                  &lt;/div&gt; 
                  &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%"&gt;                                            
                  &lt;/div&gt;
                  &lt;span class="course-progressbar-name"&gt;subject5&lt;/span&gt;
                  &lt;span class="course-grade-percentage"&gt;60%&lt;/span&gt;
                  &lt;span class="course-grade-label"&gt;GRADE&lt;/span&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p></p>