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

Question

＆＃13;

＆＃13;

$(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%");
        }
    }
        
    }); 
	 });

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望为页面中的每篇文章生成一个进度条，但是 为什么这段代码不适用于页面中的每个文章元素...它仅适用于第一个元素，但不适用于以下元素，其中进度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");
}

}); 

});

该页面中有几篇文章。

Answer 1

您需要在循环中使用$(this)而不是$('article') - 我已在下面进行了替换：

$(window).scroll( function() {
  $('article').each( function(i) {

    var scrollwin = $(window).scrollTop();
    var articleheight = $('article').outerHeight(true);
    var windowWidth = $(window).width();

    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%");
      }
    }
    else {
      $('.progress').css('width',"0px");
    }

  }); 
});

在您的代码中，您使用的是$('article')而非$(this)，而article仅选择页面上的第一个this。使用article可确保您仅引用当前位于each

循环中的\u