Индикатор выполнения при прокрутке

Мне нужна помощь, чтобы сделать индикатор выполнения при прокрутке страницы.Индикатор выполнения при прокрутке

Пользователь будет нажимать на кнопку, затем полоска заполняется.

Я был в замешательстве?

моя треска.

var sections = $('.panelSection'); 
 
console.log(sections); 
 
var i = 0; 
 
var scrolto = 0; 
 

 
function next() { 
 
    if (i == 0) { 
 
     $('.prev-section').show(); 
 
    } 
 
    
 
    if (i < sections.length -1) { 
 
     i++; 
 
     if (i == sections.length -1) { 
 
      $('.next-section').hide(); 
 
     } 
 
     
 
     $('html, body').animate({ 
 
      scrollTop: sections[i].offsetTop 
 
     }, 500); 
 
    } else { 
 
     alert('end reached'); 
 
    } 
 
} 
 

 
function prev() { 
 
    if (i == sections.length -1) { 
 
     $('.next-section').show(); 
 
    } 
 
    
 
    if (i > 0) { 
 
     i--; 
 
     if (i == 0) { 
 
      $('.prev-section').hide(); 
 
     } 
 
     
 
     $('html, body').animate({ 
 
      scrollTop: sections[i].offsetTop 
 
     }, 500); 
 
    } 
 
} 
 

 
$('html').keydown(function(e) { 
 
    if (e.which == '38') { 
 
     prev(); 
 
    } 
 
    
 
    if (e.which == '40') { 
 
     next(); 
 
    } 
 
}); 
 

 
$('.next-section').click(function(e) { 
 
    e.preventDefault(); 
 
    next(); 
 
}); 
 

 
$('.prev-section').click(function(e) { 
 
    e.preventDefault(); 
 
    prev(); 
 
});

section { 
 
    height: 100vh; 
 
    text-align: center; 
 
    font-size: 30pt 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<section class="panelSection" style="background-color:#ef0000;"> 
 
    ... section content here ... 
 
</section> 
 

 
<section class="panelSection" style="background-color:#c9d6e3;"> 
 
    ... 2nd section content here ... 
 
</section> 
 

 
<footer> 
 
    <div class="navbar navbar-default navbar-fixed-bottom"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-collapse collapse" id="footer-body"> 
 
       <ul class="nav navbar-nav pull-left"> 
 

 

 
       </ul> 
 

 
       <ul class="nav navbar-nav pull-right"> 
 

 
        <a href="#" class="prev-section">up</a> 
 
        <a href="#" class="next-section">next</a> 
 

 
       </ul> 
 
      </div> 
 

 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 

 
        <a href="#" class="next-section">next</a> 
 

 

 
       </button> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</footer>

Я не думаю, что ничего подобного в интернете, если кто-нибудь может помочь я буду благодарить много!

источник

2015-07-23 Yuri Rodrigues

И этот код не работает? Работает, но не так, как вы хотите? –

нет, мне нужна индикация выполнения, пока страница идет вниз –

function updateProgress(num1, num2){ 
 
    var percent = Math.ceil(num1/num2 * 100) + '%'; 
 
    document.getElementById('progress').style.width = percent; 
 
} 
 

 
window.addEventListener('scroll', function(){ 
 
    var top = window.scrollY; 
 
    var height = document.body.getBoundingClientRect().height - window.innerHeight; 
 
    updateProgress(top, height); 
 
});

.placeholder{ 
 
    padding: 3em; 
 
} 
 
.progressContainer{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 4px; 
 
    background: gray; 
 
} 
 
.progress{ 
 
    height: 4px; 
 
    background: red; 
 
    width: 0; 
 
    transition: width 0.5s; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title></title> 
 
</head> 
 

 
<body> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
\t <div class="placeholder"> 
 
\t \t some padding... 
 
\t </div> 
 
    <div class="progressContainer"><div id="progress" class="progress"></div></div> 
 
</body> 
 

 
</html>

источник

2015-07-23 19:16:08 zeachco

Надеюсь, что поможет – zeachco

спасибо! но теперь мне нужно добавить круг для каждой остановки прокрутки, и знаете, как я это делаю? –

Конечно, позвольте мне попробовать jsbin, поскольку редактор кода StackO ограничен ... – zeachco

Вот пример, в качестве бонуса я добавил ссылку вы можете нажать кнопку, чтобы вернуться в положение https://jsbin.com/ququnovowo/edit?css,js,output

Просто имейте в виду, что при прокрутке есть будет добавлено много нового круга, и это может быть не ожидаемое поведение ...

источник

2015-07-24 15:58:12 zeachco

Индикатор выполнения при прокрутке

ответ

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