В этом видео вы узнаете, как сделать полосу индикатора прокрутки фиксированной с адаптивной панелью навигации в заголовке для веб-сайта с использованием HTML, CSS и Javascript. Полоса индикатора прокрутки показывает, насколько прокручена страница, а также работает при прокрутке страницы вверх.
HTML + JAVASCRIPT КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header Navigation Menu With Scroll Indicator Bar - Html, Css & Javascript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<header>
<div class="nav-bar">
<a href="" class="logo">Logo</a>
<div class="navigation">
<div class="nav-items">
<i class="uil uil-times nav-close-btn"></i>
<a href="#"><i class="uil uil-home"></i> Home</a>
<a href="#"><i class="uil uil-compass"></i> Explore</a>
<a href="#"><i class="uil uil-info-circle"></i> About</a>
<a href="#"><i class="uil uil-document-layout-left"></i> Blog</a>
<a href="#"><i class="uil uil-envelope"></i> Contact</a>
</div>
</div>
<i class="uil uil-apps nav-menu-btn"></i>
</div>
<div class="scroll-indicator-container">
<div class="scroll-indicator-bar"></div>
</div>
</header>
<section class="home">
<h1>Scroll Indicator</h1>
</section>
<section class="content">
<h1>Scroll Indicator Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<script>
//Javacript for the scroll indicator bar
window.addEventListener("scroll", () => {
const indicatorBar = document.querySelector(".scroll-indicator-bar");
const pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollValue = (pageScroll / height) * 100;
indicatorBar.style.width = scrollValue + "%";
});
//Responsive navigation menu toggle
const menuBtn = document.querySelector(".nav-menu-btn");
const closeBtn = document.querySelector(".nav-close-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
navigation.classList.add("active");
});
closeBtn.addEventListener("click", () => {
navigation.classList.remove("active");
});
</script>
</body>
</html>
CSS КОД:
/*======= Google fonts =======*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*======= Main Css =======*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #000116;
}
/*======= Header navigation bar =======*/
header{
z-index: 999;
position: fixed;
width: 100%;
}
header .nav-bar{
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
height: 4em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 150px;
transition: 0.5s ease;
}
.nav-bar .logo{
color: #fff;
font-size: 1.8em;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
}
.navigation .nav-items a{
color: #fff;
font-size: 1em;
text-decoration: none;
}
.navigation .nav-items a:not(:last-child){
margin-right: 50px;
}
.navigation .nav-items a i{
display: none;
}
/*======= Home =======*/
section{
position: relative;
font-size: 1em;
padding: 30px 150px;
transition: 0.5s ease;
transition-property: padding;
}
.home{
position: relative;
min-height: 100vh;
background: url(home-bg.jpg) no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
.home:before{
z-index: 888;
content: '';
position: absolute;
width: 100%;
height: 50px;
background: linear-gradient(transparent, #000116);
bottom: 0;
left: 0;
}
.home h1{
color: rgba(255, 255, 255, 0.5);
font-size: 6em;
font-weight: 600;
}
/*======= Content section =======*/
.content h1{
color: #fff;
font-size: 3.5em;
font-weight: 600;
}
.content p{
color: #fff;
font-size: 1em;
margin: 30px 0;
}
/*======= Scroll bar =======*/
::-webkit-scrollbar{
background: #fff;
width: 11px;
border-radius: 2em;
}
::-webkit-scrollbar-thumb{
background: #282f4e;
width: 100%;
border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover{
background: #454f6d;
}
/*======= Scroll indicator bar =======*/
.scroll-indicator-container{
width: 100%;
height: 5px;
}
.scroll-indicator-bar{
background: #199fff;
width: 0%;
height: 100%;
box-shadow: 0 5px 25px #199fff,
0 5px 50px #199fff;
}
.nav-close-btn, .nav-menu-btn{
display: none;
}
/*======= Media queries (max-width: 1100px) =======*/
@media screen and (max-width: 1100px){
header .nav-bar{
padding: 0 50px;
}
section{
padding: 30px 50px;
font-size: 0.9em;
}
}
/*======= Media queries (max-width: 850px) =======*/
@media screen and (max-width: 850px) {
header .nav-bar {
padding: 0 20px;
}
section {
padding: 30px 20px;
font-size: 0.8em;
}
/*======= Navigation menu =======*/
.nav-menu-btn{
display: block;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
.navigation{
z-index: 99999;
position: fixed;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
}
.navigation.active{
visibility: visible;
opacity: 1;
}
.navigation .nav-items{
position: relative;
background: #fff;
width: 400px;
max-width: 400px;
display: grid;
place-content: center;
margin: 20px;
padding: 40px;
border-radius: 20px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
transform: translateY(-200px);
transition: 0.3s ease;
}
.navigation.active .nav-items{
transform: translateY(0);
}
.navigation .nav-items a{
color: #222;
font-size: 1em;
margin: 15px 50px;
}
.navigation .nav-items a i{
display: inline-block;
font-size: 1.2em;
margin-right: 5px;
}
.nav-close-btn{
display: block;
color: #222;
position: absolute;
top: 0;
right: 0;
font-size: 1.3em;
margin: 10px;
cursor: pointer;
}
}