WebSite X5Help Center

 
Fabio R.
Fabio R.
User

Barra progressi  it

Auteur : Fabio R.
Visité 1204, Followers 2, Partagé 0  

ciao

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>

Posté le
6 RéPONSES - 1 UTILES - 1 CORRECT
Claudio D.
Claudio D.
Moderator

quella è una pagina completa...

comunque

alza lo z-index a 50000

dovrebbe bastare

Lire plus
Posté le de Claudio D.
Fabio R.
Fabio R.
User
Auteur

grazie Claudio, domattina provo.

sì, ho copiato tutto...

Fabio

Lire plus
Posté le de Fabio R.
Fabio R.
Fabio R.
User
Auteur

buongiorno

funziona perfettamente

grazie 1000

Fabio

Lire plus
Posté le de Fabio R.
Claudio D.
Claudio D.
Moderator

bene.

chiudi il post

Lire plus
Posté le de Claudio D.
Fabio R.
Fabio R.
User
Auteur

gulp

non trovo come si chiude...

Lire plus
Posté le de Fabio R.
Claudio D.
Claudio D.
Moderator

spunta verde sulla risposta che ti ha risolto... (dopo il click diventerà rossa)

Lire plus
Posté le de Claudio D.