This commit is contained in:
hoernschen 2021-02-17 19:56:58 +01:00
parent cbcb89f9fa
commit 34ce60164a
17 changed files with 607 additions and 82 deletions

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "Font-Awesome"]
path = Font-Awesome
url = https://github.com/FortAwesome/Font-Awesome.git

1
Font-Awesome Submodule

@ -0,0 +1 @@
Subproject commit 57f1632d7303fbcd8974425882ffd9919fc4041b

View file

@ -1,13 +1,15 @@
.footer { .footer {
margin: auto; margin: auto;
padding: 1.5rem; padding: 1.5rem;
width: 100%;
flex-shrink: 0;
text-align: center; text-align: center;
display: block; display: block;
background-color: #333; background-color: #333;
color: #f2f2f2; color: #f2f2f2;
} }
.social-media { .social-media-footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -20,6 +22,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0;
} }
.link { .link {
@ -32,7 +35,7 @@
} }
.copyright { .copyright {
margin-top: 1.5rem; margin-top: 2rem;
width: 100%; width: 100%;
font-size: small; font-size: small;
} }

View file

@ -1,34 +1,47 @@
.header { .header {
margin: auto; margin: auto;
padding: 1.5rem; width: 100%;
padding-bottom: 0.5rem; padding: 1rem;
text-align: center;
display: flex; display: flex;
font-size: large; font-size: large;
overflow: hidden; overflow: hidden;
height: auto; flex-shrink: 0;
background: white;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
position: fixed;
z-index: 999;
top: 0;
}
.header-container {
width: 100%;
max-width: 1152px;
display: flex;
margin: auto;
}
.sticky {
position: fixed;
top: 0;
} }
.logo { .logo {
display: flex;
height: 3.5rem; height: 3.5rem;
} }
.small-logo {
height: 2.5rem;
}
.menu-icon {
display: none;
font-size: larger;
}
.header-items { .header-items {
margin: auto; margin: auto;
/* padding-right: 1rem;
margin-right: 0px; */
margin-left: 0px; margin-left: 0px;
display: flex; display: flex;
float: right;
right: 0px;
align-items: right;
text-align: right;
}
.header-items .menu-icon {
display: none;
font-size: larger;
} }
.header-item { .header-item {
@ -36,7 +49,6 @@
} }
.dropdown { .dropdown {
float: left;
overflow: hidden; overflow: hidden;
} }
@ -48,20 +60,16 @@
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: fixed;
background-color: #f9f9f9; background-color: #ffffff;
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
} }
.dropdown-content a { .dropdown-content a {
float: none; padding: 0.5rem 1rem;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block; display: block;
text-align: left;
} }
.dropdown-content a:hover { .dropdown-content a:hover {
@ -73,40 +81,65 @@
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.header-items .dropdown .dropbtn { .header-container {
display: none; display: block;
} }
.header-items .header-item {
.home {
width: 100vw;
}
.menu-icon {
display: block;
position: fixed;
top: 30px;
right: 30px;
}
.menu-icon .hide {
display: none; display: none;
} }
.header-items a.menu-icon {
float: right; .small-icon {
display: block; top: 20px;
} }
}
.header-items {
@media screen and (max-width: 600px) { display: none;
.header-items.responsive {position: relative;}
.header-items.responsive .menu-icon {
position: absolute;
right: 0;
top: 0;
} }
.header-items.responsive a {
float: none; .header-items.responsive {
display: block; position: relative;
text-align: left; float: none;
} display: block;
.header-items.responsive .dropdown {float: none;} text-align: left;
.header-items.responsive .dropdown-content {position: relative;} margin-top: 0.5rem;
.header-items.responsive .dropdown .dropbtn {
display: block;
width: 100vw;
text-align: left;
} }
.header-items.responsive .header-item { .header-items.responsive .header-item {
display: block;
margin-left: 0rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.header-items.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.header-items.responsive .dropdown {
float: none;
}
.header-items.responsive .dropdown-content {
position: relative;
box-shadow: none;
}
.header-items.responsive .dropdown .dropbtn {
display: block; display: block;
width: 100vw; width: 100vw;
text-align: left; text-align: left;
} }
} }

View file

@ -1,3 +1,169 @@
/* html {
scroll-behavior: smooth;
} */
html, body {
height: 100%;
}
body { body {
margin: 0px margin: 0px;
display: flex;
flex-direction: column;
font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
color: #333;
}
h1 {
margin: 0rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
p {
margin: 0.5rem;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
font-size: 100%;
line-height: inherit;
color: inherit;
background-color: transparent;
background-image: none;
text-transform: none;
padding: 0;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.row::after {
content: "";
clear: both;
display: table;
}
.content {
border: 2px;
border-color: black;
flex: 1 0 auto;
max-width: 1152px;
align-self: center;
padding: 3rem 1.5rem;
padding-top: 8rem;
}
.divider {
height: 3px;
border-radius: 50px;
background: tomato;
width: 60px;
}
.title {
font-size: large;
padding-bottom: 1rem;
text-align: start;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video {
position: absolute;
margin: 0 auto;
border: 5px dotted tomato;
top: 0;
left: 0;
width: 100%;
/* max-width: 640px; */
height: 100%;
}
.section {
padding-bottom: 3rem;
}
/* Team */
.team {
align-items: center;
text-align: center;
}
.teammember {
display: inline-block;
align-items: center;
text-align: center;
margin: 0 auto;
padding: 1.5rem;
}
.avatar {
width: 15rem;
height: 15rem;
border-radius: 50%;
border: 2px solid tomato;
object-fit: cover;
margin: 0 auto;
}
.teammember-title {
font-size: x-large;
padding-bottom: 0.1rem;
}
.social-media {
display: flex;
justify-content: center;
flex-wrap: wrap;
font-size: 1.5em;
padding-top: 1rem;
color: #333;
min-height: 2em;
}
/* Funding */
.funding-logo {
width: 15rem;
padding: 1.5rem;
}
.reference-logo {
max-height: 15rem;
max-width: 15rem;
padding: 1.5rem;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.service-icon {
min-width: 300px;
justify-content: center;
} }

9
css/progressbar.css Normal file
View file

@ -0,0 +1,9 @@
/* default CSS variables */
.progress {
background: linear-gradient(to right, tomato var(--scroll), transparent 0);
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 4px;
z-index: 1000;
}

134
css/slider.css Normal file
View file

@ -0,0 +1,134 @@
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-snap-stop: inherit;
-webkit-overflow-scrolling: touch;
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 30rem;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.slide > img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide-links {
position: absolute;
margin: 0;
top: 35rem;
left: 0;
right: 0;
}
.slide-links > a {
display: inline-flex;
width: 1rem;
height: 1rem;
background: tomato;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0 1rem;
position: relative;
z-index: 1;
}
.slider-navigation-left {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
height: inherit;
left: 0;
top: 0;
z-index: 2;
color: tomato;
font-size: 3.5em;
}
.slider-navigation-left:hover {
cursor: pointer;
color: #444;
}
.slider-navigation-right {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
height: inherit;
top: 0;
right: 0;
z-index: 2;
color: tomato;
font-size: 3.5em;
}
.slider-navigation-right:active > i {
top: 1px;
}
.slider-navigation-right:hover {
cursor: pointer;
color: #444;
}
.slide-links > a:hover {
cursor: pointer;
background: #444;
}
.slide-links > a:active {
top: 1px;
}

View file

@ -9,8 +9,8 @@
border-radius: 50%; border-radius: 50%;
margin: 30px; margin: 30px;
position: fixed; position: fixed;
bottom: 30px; bottom: 0px;
right: 30px; right: 0px;
transition: background-color .3s; transition: background-color .3s;
z-index: 1000; z-index: 1000;
} }
@ -25,7 +25,9 @@
opacity: 0; opacity: 0;
} }
.totop:hover { @media screen and (min-width: 600px) {
cursor: pointer; .totop:hover {
background-color: #333; cursor: pointer;
background-color: black;
}
} }

BIN
images/133200.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 877 KiB

BIN
images/39612.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
images/7046.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

BIN
images/NBank_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/logo_dicke_eiche.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -2,39 +2,186 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/totop.css"> <link rel="stylesheet" href="css/totop.css">
<script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/progressbar.css">
<link rel="stylesheet" href="Font-Awesome/css/all.min.css">
<!-- <script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script> -->
</head> </head>
<body> <body>
<div class="progress"></div>
<header class="header"> <header class="header" id="header">
<a href="#"><img class="logo" src="images/NEO Logo.png"></a> <div class="header-container">
<div class="header-items" id="header-items"> <a class="home" href="#"><img id="logo" class="logo" src="images/NEO Logo.png"></a>
<a class="header-item" href="#">Über uns</a> <div class="header-items" id="header-items">
<a class="header-item" href="#">Blog</a> <a class="header-item" href="#">Über uns</a>
<div class="header-item dropdown"> <a class="header-item" href="#">Blog</a>
<button class="dropbtn">Portfolio <div class="header-item dropdown">
<i class="fas fa-caret-down"></i> <button class="dropbtn">Portfolio
</button> <i class="fas fa-caret-down"></i>
<div class="dropdown-content"> </button>
<a href="#">Tauschmärkte</a> <div class="dropdown-content">
<a href="#">Konsumkritischer Stadtrundgang</a> <a href="#">Tauschmärkte</a>
<a href="#">Workshops</a> <a href="#">Konsumkritischer Stadtrundgang</a>
<a href="#">Workshops</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<a href="javascript:void(0);" class="menu-icon" onclick="myFunction()">&#9776;</a> <a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="myFunction()">&#9776;</a>
</header> </header>
<div class="content">
<div class="section">
<div class="slider">
<div class=slide-links>
<a onclick="scrollToSlide(0)"></a>
<a onclick="scrollToSlide(1)"></a>
<a onclick="scrollToSlide(2)"></a>
</div>
<div class="slides">
<div class="slide" id="slide-1">
<img src="images/133200.jpg">
<span class="slider-navigation-right" onclick="scrollToSlide(1)">
<i class="fas fa-angle-right"></i>
</span>
<span class="slider-navigation-left" onclick="scrollToSlide(2)">
<i class="fas fa-angle-left"></i>
</span>
</div>
<div class="slide" id="slide-2">
<img src="images/39612.jpg">
<span class="slider-navigation-right" onclick="scrollToSlide(2)">
<i class="fas fa-angle-right"></i>
</span>
<span class="slider-navigation-left" onclick="scrollToSlide(0)">
<i class="fas fa-angle-left"></i>
</span>
</div>
<div class="slide" id="slide-3">
<img src="images/7046.jpg">
<span class="slider-navigation-right" onclick="scrollToSlide(0)">
<i class="fas fa-angle-right"></i>
</span>
<span class="slider-navigation-left" onclick="scrollToSlide(1)">
<i class="fas fa-angle-left"></i>
</span>
</div>
</div>
</div>
</div>
<div class="section">
<div class="videoWrapper">
<iframe class="video" src="https://kompetenzzentrum-lingen.digital/wp-content/uploads/2020/08/200818-Video-Hof-Langenberg-Kompetenzzentrum-Lingen.mp4?_=5" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="section row">
<div class="services">
<div class="service-icon col-4">
<img src="images/logo_meyer_zu_theenhausen.jpg">
</div>
<div class="service-description col-8">
<div class="title">
<h1 class="content-title">Onlineshop</h1>
<div class="divider"></div>
</div>
<p>Bewerben Sie Ihre Produkte online und geben Sie Ihren Kunden die Möglichkeit diese zu bestellen.</p>
</div>
</div>
</div>
<div class="section">
<div class="team">
<div class="title">
<h1 class="content-title">Das Team</h1>
<div class="divider"></div>
</div>
<div class="teammember">
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
<p>Entwicklung</p>
<p>Finanzen</p>
<div class="social-media">
<span>
<a href="https://twitter.com/jhoernschen"><i href="#" class="fab fa-twitter"></i></a>
<a href="https://chaos.social/@hoernschen"><i href="#" class="fab fa-mastodon"></i></a>
<a href="https://github.com/hoernschen"><i href="#" class="fab fa-github"></i></a>
<a href="#"><i href="#" class="fab fa-xing"></i></a>
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
<div class="teammember">
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
<p>Entwicklung</p>
<p>Finanzen</p>
<div class="social-media">
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
</div>
</div>
<div class="teammember">
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
<p>Entwicklung</p>
<p>Finanzen</p>
<div class="social-media">
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
</div>
</div>
<div><a href="#"> > Weitere Teammitglieder < </a></div>
</div>
</div>
<div class="section">
<div class="references">
<div class="title">
<h1 class="content-title">Unsere Referenzen</h1>
<div class="divider"></div>
</div>
<div class="reference-logos">
<img class="reference-logo" src="images/logo_gemuesegaertner.png" alt="Die Gemüsegärtner">
<img class="reference-logo" src="images/logo_meyer_zu_theenhausen.jpg" alt="Meyer zu Theenhausen">
<img class="reference-logo" src="images/logo_dicke_eiche.png" alt="Dicke Eiche">
</div>
</div>
</div>
<div class="section">
<div class="funding">
<div class="title">
<h1 class="content-title">Gefördert duch</h1>
<div class="divider"></div>
</div>
<div class="funding-logos">
<img class="funding-logo" src="images/NBank_logo.png" alt="NBank">
</div>
</div>
</div>
<div class="title">
<h1 class="content-title">Test</h1>
<div class="divider"></div>
</div>
<p>
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. Thats what we want! Personally, Ive left websites solely because simple navigation options were not available, and in some cases Id even rather call the company than deal with their website.
In this tutorial well go over how to make a sticky header using HTML and CSS. For advanced animated effects, well add some Javascript at the end. For those who dont already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after youre done adding the coding that you think you need. Otherwise, something could go wrong and itll take longer to pinpoint exactly what the problem is. So, take it slow. Now, lets get to the coding and building!
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. Thats what we want! Personally, Ive left websites solely because simple navigation options were not available, and in some cases Id even rather call the company than deal with their website.
In this tutorial well go over how to make a sticky header using HTML and CSS. For advanced animated effects, well add some Javascript at the end. For those who dont already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after youre done adding the coding that you think you need. Otherwise, something could go wrong and itll take longer to pinpoint exactly what the problem is. So, take it slow. Now, lets get to the coding and building!
</p>
</div>
<footer class="footer"> <footer class="footer">
<div class="social-media"> <div class="social-media-footer">
<span> <span>
<a href="#"><i href="#" class="fab fa-facebook"></i></a> <a href="#"><i href="#" class="fab fa-facebook"></i></a>
<a href="#"><i href="#" class="fab fa-instagram"></i></a> <a href="#"><i href="#" class="fab fa-instagram"></i></a>
@ -43,11 +190,11 @@
<a href="#"><i href="#" class="fab fa-mastodon"></i></a> <a href="#"><i href="#" class="fab fa-mastodon"></i></a>
<a href="#"><i href="#" class="fab fa-github"></i></a> <a href="#"><i href="#" class="fab fa-github"></i></a>
<a href="#"><i href="#" class="fab fa-lastfm"></i></a> <a href="#"><i href="#" class="fab fa-lastfm"></i></a>
<a href="#"><i href="#" class="fab fa-xing"></i></a>
<a href="#"><i href="#" class="fab fa-linkedin"></i></a> <a href="#"><i href="#" class="fab fa-linkedin"></i></a>
<a href="#"><i href="#" class="fas fa-rss-square"></i></a> <a href="#"><i href="#" class="fas fa-rss-square"></i></a>
<a href="#"><i href="#" class="fas fa-link"></i></a> <a href="#"><i href="#" class="fas fa-link"></i></a>
</span> </span>
</div> </div>
<div> <div>
<ul class="links"> <ul class="links">
@ -63,15 +210,30 @@
</div> </div>
</footer> </footer>
<a class="totop hide" id="totop"><i href="#" class="fas fa-chevron-up"></i></a> <a class="totop hide" id="totop"><i href="#" class="fas fa-chevron-up"></i></a>
<script>
function scrollToSlide(slideNr) {
const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
const width = slider.querySelector('.slide').clientWidth;
slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
}
</script>
<script> <script>
const scrollToTopButton = document.getElementById('totop'); const scrollToTopButton = document.getElementById('totop');
const logo = document.getElementById('logo');
const header = document.getElementById("header");
const menuIcon = document.getElementById("menu-icon");
var sticky = header.offsetTop;
const scrollFunc = () => { const scrollFunc = () => {
let y = window.scrollY; let y = window.scrollY;
if (y > 0) { if (y > 0) {
scrollToTopButton.className = "totop show"; scrollToTopButton.className = "totop show";
logo.className = "small-logo"
menuIcon.classList.add("small-icon")
} else { } else {
scrollToTopButton.className = "totop hide"; scrollToTopButton.className = "totop hide";
logo.className = "logo"
menuIcon.classList.remove("small-icon")
} }
}; };
@ -91,12 +253,24 @@
} }
function myFunction() { function myFunction() {
var x = document.getElementById("header-items"); var headerItems = document.getElementById("header-items");
if (x.className === "header-items") { if (headerItems.className === "header-items") {
x.className += " responsive"; headerItems.classList.add("responsive")
} else { } else {
x.className = "header-items"; headerItems.classList.remove("responsive")
} }
} }
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight',
progress = document.querySelector('.progress'),
scroll;
document.addEventListener('scroll', function() {
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
});
</script> </script>
</body> </body>