parent
c4d30929f2
commit
e6a1b0ad93
@ -0,0 +1,63 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.Progress {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
|
||||
}
|
||||
|
||||
.Prostick {
|
||||
width: 0;
|
||||
background-color: #0091EA;
|
||||
height: 5px;
|
||||
}
|
||||
.navbar{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: fixed;
|
||||
background-color: lightgray;
|
||||
top: 0;
|
||||
box-shadow: 0px 6px 5px rgb(179, 175, 175);
|
||||
}
|
||||
.navinit{
|
||||
width: 980px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.navbtnpart{
|
||||
float: right;
|
||||
}
|
||||
.logo{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
|
||||
}
|
||||
.navbtn{
|
||||
line-height: 65px;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.navbtn a{
|
||||
color: #000;
|
||||
}
|
||||
.navbtn a:hover{
|
||||
color: #0091ea;
|
||||
}
|
||||
.footer{
|
||||
height: 100px;
|
||||
background-color: #3fa8ea;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
@ -0,0 +1,10 @@
|
||||
let totalHight;
|
||||
let moved;
|
||||
let Prostick;
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
if (totalHight && Prostick) {
|
||||
let pro = (moved / totalHight) * 100;
|
||||
Prostick.style.width = pro + '%';
|
||||
}
|
||||
});
|
Loading…
Reference in new issue