Barra progressi 
Autore: Pc Winciao
ho questo codice che utilizzo per far apparire una barra, in alto a tutto, che aumenta man mano che il visitatore scorre lungo il sito.
Secondo voi, è possibile far sì che rimanga sempre in visione e che non venga nascosta nè dalla stickybar nè dalle immagini o testi..
grazie, come sempre...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.content {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
</style>
</head>
<body>
<div class="header">
<h3></h3>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
</body>
</html>
quella è una pagina completa...
comunque
alza lo z-index a 50000
dovrebbe bastare
Autore
grazie Claudio, domattina provo.
sì, ho copiato tutto...
Fabio
Autore
buongiorno
funziona perfettamente
grazie 1000
Fabio
bene.
chiudi il post
Autore
gulp
non trovo come si chiude...
spunta verde sulla risposta che ti ha risolto... (dopo il click diventerà rossa)