为什么代码没有应用于页面中的每个元素

$(window).scroll(function() {
  
    var scrollwin = $(window).scrollTop();
    var windowWidth = $(window).width();
	
  $('article').each( function(i) {
	var articleheight = $('article').outerHeight(true);
    if(scrollwin >= $(this).offset().top){
		
        if(scrollwin <= ($(this).offset().top + articleheight)){
        $('.progress').css('width', ((scrollwin - $(this).offset().top) / articleheight) * 100 + "%"  );
        }else{
            $('.progress').css('width',"100%");
        }
    }
        
    }); 
	 });

.progress {
    height: 5px;
    background-color: red;
    width: 0px;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0;
}
body {
    height:4000px;   
}
article{
    background-color: lightgray;
}
h2 {
  text-style:bold;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
    <header>Header content <br>
    header content<p>Header content<br>
    header content<p>Header content<br>
    header content<p></header>
    
    <article>
      <div class="article-1">
        <h1>Begin Article 1 </h1>
        <p>
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
          </p>
      </div>
    </article>
    <article>
      <div class="article-2">
        <h1>Begin Article 2 </h1>
        <p>
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
          </p>
      </div>
      
    </article>
    <article>
      <div class="article-3">
        <h1>Begin Article 3 </h1>
        <p>
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
        article content<br />article content<br />
          </P>
      </div>
    </article>
    <footer> <h1>Footer</h1>
    <div class="footer"> 
        <h4>Footer content</h4> 
        <h4>Footer content</h4>  
        <h4>Footer content</h4>  
        <h4>Footer content</h4> 
        <h4>Footer content</h4> 
      </div> </footer>

我想在一个页面中为每篇文章生成一个进度条，但是为什么这段代码不能处理页面中的每个文章元素。。。它只适用于第一个元素，但不适用于以下元素，其中进度div立即为100%？

$(window).scroll(function() {
$('article').each( function(i){
var scrollwin = $(window).scrollTop();
var articleheight = $('article').outerHeight(true);
var windowWidth = $(window).width();
if(scrollwin >= $('article').offset().top){
    if(scrollwin <= ($('article').offset().top + articleheight)){
    $('.progress').css('width', ((scrollwin - $('article').offset().top) /   articleheight) * 100 + "%"  );
    }else{
        $('.progress').css('width',"100%");
    }
}else{
    $('.progress').css('width',"0px");
}
}); 
});

页面中有几篇文章。