Warum Code nicht mit der Seite auf jedes Element angewendet

$(window).scroll(function() { 
 
    
 
    var scrollwin = $(window).scrollTop(); 
 
    var windowWidth = $(window).width(); 
 
\t 
 
    $('article').each(function(i) { 
 

 
\t var articleheight = $('article').outerHeight(true); 
 

 
    if(scrollwin >= $(this).offset().top){ 
 
\t \t 
 
     if(scrollwin <= ($(this).offset().top + articleheight)){ 
 
     $('.progress').css('width', ((scrollwin - $(this).offset().top)/articleheight) * 100 + "%" ); 
 
     }else{ 
 
      $('.progress').css('width',"100%"); 
 
     } 
 
    } 
 
     
 
    }); 
 
\t });

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

Ich möchte für jeden Artikel innerhalb einer Seite erzeugt einen Fortschrittsbalken haben, aber warum ist dieser Code auf jedem Artikel Element nicht funktioniert innerhalb der Seite ... Es funktioniert nur für das erste Element, aber nicht für die folgenden, wo das Fortschrittsdiv sofort 100% ist?

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

}); 

});

Die Seite enthält mehrere Artikel.

Quelle

2016-07-23 Timbo

ist Könnten Sie bitte fügen Sie Ihre HTML! –

Der Grund, warum es nur für das letzte Element funktioniert, ist, dass Sie '$ ('. Progress'). Css ('width'," 0px ");' am Ende jeder Schleife für jeden Artikel, der nicht angezeigt wird Dies bedeutet, dass, selbst wenn Artikel # 1 die '.progress'-Breite bei der Anzeige korrekt einstellt, sie auf 0px zurückgesetzt wird, wenn der' .each() '-loop den zweiten Artikel verarbeitet. Deshalb funktioniert es nur beim letzten, weil es keine Schleifeniterationen mehr gibt, um es auf 0px zurückzusetzen. –

Danke, die Else-Anweisung aus dem obigen Code entfernt, um zu zeigen, dass es funktioniert. – Timbo

Sie müssen $(this) in der Schleife verwenden, statt $('article') - Ich habe den Ersatzartikel gemacht:

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

    }); 
});

In Ihrem Code, wurden Sie $('article') statt $(this) mit der nur die ersten article Auswahl auf der Seite. Mit this wird sichergestellt, dass Sie nur auf die article beziehen, die derzeit in der Schleife von each

Quelle

2016-07-23 15:18:16

Denke, ich habe das versucht ..., aber mit dem obigen Code funktioniert es nur, wenn ich zum letzten Element scrolle (und ich sehe, dass alle anderen Elemente funktionieren) – Timbo

@Timbo Ich habe es versäumt, eine der Artikelreferenzen zu ersetzen . Ich habe es bearbeitet, um das zu reflektieren. Wenn nichts anderes, lerne von meiner Antwort und schreibe den Code, kopiere den Code nicht blindlings –

Setze auch 'var scrollwin = $ (window) .scrollTop();' und 'var windowWidth = $ (window) .width (); 'vor' .each'. –

Warum Code nicht mit der Seite auf jedes Element angewendet

Antwort

Verwandte Themen