1

Hola amigos tengo un blog con scroll infinito y tengo una barra de progreso según el scroll. cuando scrolltop sea mayor a un id o una classe la barra de proceso se reinicia. todo va bien hasta el segundo ID o classe no se reinicia el progreso.

 $(document).ready(function () {
            $(window).scroll(function () {
                var s = $(this).scrollTop(),
                    d = $(document).height()-$(window).height(),
                    scrollPercent = 0;                                                
                if($(this).scrollTop()< $('.separator').position().top){
                    scrollPercent = (s / d)*100;       
                    $("#progressbar").attr('value', scrollPercent);
                }
                else{                        
                    scrollPercent = (( $(this).scrollTop() - $('.separator').position().top )/ d)*100;       
                    $("#progressbar").attr('value', scrollPercent);
                }
            });
        });

Ejemplo: http://jsfiddle.net/a36m8u02/5/

la clase para dividir un articulo del otro es "separator" cada ves que el scroll pase por esa clase el progreso debe empezar desde 0 nuevamento.

Gracias

2
  • Deberias agregar tu HTML.
    – alanfcm
    el 23 ene. 2019 a las 17:12
  • Listo amigo agregue un link donde esta el html. gracias el 23 ene. 2019 a las 17:15

1 respuesta 1

1

Este ejemplo funciona con 2 divisiones, si tienes mas, debes de cambier el limite de la variable index de 2 al numero que tengas.

$(document).ready(function () {
      var index = 0;
      $(window).scroll(function () {
          var s = 0;
          if (index == 0) {
            s = $(this).scrollTop();
          } else {
            s = $(this).scrollTop() - $($('.separator')[index - 1]).position().top;
          }
          d = $(document).height()-$(window).height(),
          scrollPercent = 0;                                                
          if(index < 2 && $(this).scrollTop()< $($('.separator')[index]).position().top)               {
              scrollPercent = (s / d)*100;       
              $("#progressbar").attr('value', scrollPercent);
          } else{     
              if (index < 2) {
                  scrollPercent = 0;
                  index++;
              } else {
                scrollPercent = (( $(this).scrollTop() - $($('.separator')[index-1]).position().top )/ d)*100;  
              }
              $("#progressbar").attr('value', scrollPercent);
          }
      });
});
progress {position:fixed; top:15px;}
#separator{

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
<div class="separator">holaaaaaaaaaaaaaaaaaaa</div>
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />

<div class="separator">holaaaaaaaaaaaaaaaaaaa</div>
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
<div id="horizontal">test</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.