Help with progress bar!

Asked

Viewed 222 times

0

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

more or less that..

inserir a descrição da imagem aqui

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>
<script src="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 that’s it, but I need you to fill in the dots, like a vertical Timeline

BS: I haven’t taken any test yet, I just wanted a help, if anyone can help I really appreciate.

jquery html twitter-bootstrap

  • Do you have code ja friend? Play in Jsfiddle

  • The bar you want is the blue ball advancing to the right?

  • Edit your question and give more details than you need, it’s a little vague.

1 answer

1


You can work with an event mix onScroll with the property scrollTop

To figure out the maximum Scroll size, the best way I could find was:

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

All other references I found on the Internet the result comes out kind of weird...

To define which position the Scroll is in 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">

Browser other questions tagged jquery html twitter-bootstrap

You are not signed in. Login or sign up in order to post.