Почему код не применяется к каждому элементу с в странице

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

Я хочу иметь прогресс бар, сгенерированный для каждой статьи в пределах страницы, но почему этот код не работает над каждым элементом статьи внутри страницы ... Он работает только для первого элемента, но не для следующих, где прогресс 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"); 
} 

}); 

});

На этой странице представлено несколько статей.

источник

2016-07-23 Timbo

Не могли бы вы добавить свой HTML! –

Причина, по которой она работает только на последнем элементе, - это то, что вы делаете '$ ('. Progress'). Css ('width', '0px"); 'в конце каждого цикла для каждой статьи, которая не отображается , что означает, что даже если статья # 1 правильно задает ширину '.progress' при ее просмотре, она будет сброшена на 0px, когда' .each() '-loop обрабатывает вторую статью. Вот почему он работает только на последнем, потому что больше нет итераций цикла, чтобы сбросить его на 0px. –

Спасибо, Убрал оператор else из фрагмента выше, чтобы показать его работу. – Timbo

Вы должны использовать $(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

источник

2016-07-23 15:18:16

Думаю, что я пробовал это ..., но с над кодом он работает только при прокрутке до последнего элемента (и я вижу, что он делает все остальные элементы выше работы) – Timbo

@Timbo Я пропустил замену одной из ссылок на статьи , Я отредактировал его, чтобы это отразить. Если ничего больше, узнайте из моего ответа и напишите код, не просто скопируйте код вслепую –

Также поместите 'var scrollwin = $ (window) .scrollTop();' и 'var windowWidth = $ (window) .width (); 'before' .each'. –

Почему код не применяется к каждому элементу с в странице

ответ

Смежные вопросы