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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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