Help with progress bar! [closed]

Navigation
0

Hello, good morning, I would like to know if anyone has already seen or has already implemented a progress bar when scrolling the page. a bar that is fixed below with a forward button

more or less this .. 

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++;
        
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }
}
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }    
}
$('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();
});      
<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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    
    section{height: 100vh;text-align: center; font-size: 30pt}    
    
</style>

<section class="panelSection">
INICIO
</section>

<section class="panelSection">
TOPICO 1
</section>
    
<section class="panelSection">
TOPICO 2
</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-right">
                    
                    <li><a href="#" class="next-section">Next Section</a></li>
                   
                </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>
                  <li><a href="#" class="next-section">Next Section</a></li>
                   
                </button>
            </div>
            
        </div>
    </div>
</footer>

Basically this is, however, I need to fill the balls, like a timeline but vertically

I have not done any tests yet, I just wanted some help, if anyone can help, thank you very much.

    
asked by anonymous 23.07.2015 / 14:34

1 answer

1

You can work with a mix of onScroll with the scrollTop

To find out the maximum size of Scroll, the best way I found it was: 

document.documentElement.scrollHeight - document.documentElement.clientHeight;

All other references that I found on the internet the result is a bit strange ...

To define in which position the Scroll is just use document.body.scrollTop 

window.onscroll = function(){
  var posicaoScroll = document.body.scrollTop;

  document.getElementById("scrollTotal").value = posicaoScroll;

}

window.onload = function(){
  var tamanhoScrol = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  document.getElementById("scrollTotal").max = tamanhoScrol;
}
<body id="testeScroll" style="height:2050px"></body>
<input id="scrollTotal" type="range" style="position:fixed;" value="0">
    
23.07.2015 / 15:24
Access to arrays of other HTML functions Recovering the HD Serial from C ++ without using WMI