Document

Real Time Example

Sorry Friends, This Scroll Percentage not works Perfectly on blogger

Go to My sololearn Account to see the real-time preview

Inspect the HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header in HTML</title>
</head>
<script>
// Scroll Indegator script
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>
<style>
*{padding: 0%;margin: 0%;}
.header {padding: 30px 16px;background: #555;color: #f1f1f1;}
.header a{padding: 20px;font-size: 30px;font-weight: bolder;text-decoration: none;color: white;}
.sticky {position: fixed;top: 0;width: 100%;}
.header:hover{background-color:black;}
.header a:hover {background-color: green;}
.progress-container {width: 100%;height: 8px;background: rgba(255, 255, 255, 0.493);}
.percentagemeter {height: 8px;background: #ff0000;}
</style>
<body>
<div class="sticky"> 
<div class="header" id="myHeader">
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="progress-container">
<div class="percentagemeter" id="myBar"></div>
</div>
</div>
<div>
 
 
 
 
<h1 style="text-align: center;"> Add your contents here ... </h1>
 
 
 
</div>
</body>
</html>

Download this HTML Source Code

Direct Download

Hello Friends,

If you need any special codes for your project or any other purpose, contact me using Email or Whatsapp

Contact form attached the bottom.

Also Read

Best PDF books for Learning

Classic Clock Version-1

Digital Clock Version-2

Image Slideshow version-2

Disco Lights Effect

Kumar Lakshmanan

Scroll Percentage on scroll

Real Time Example

Sorry Friends, This Scroll Percentage not works Perfectly on blogger

Go to My sololearn Account to see the real-time preview

Inspect the HTML

Download this HTML Source Code

Direct Download

Hello Friends,

If you need any special codes for your project or any other purpose, contact me using Email or Whatsapp

Contact form attached the bottom.

Also Read

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Scroll Percentage on scroll

Real Time Example

Sorry Friends, This Scroll Percentage not works Perfectly on blogger

Go to My sololearn Account to see the real-time preview

Inspect the HTML

Download this HTML Source Code

Direct Download

Hello Friends,

If you need any special codes for your project or any other purpose, contact me using Email or Whatsapp

Contact form attached the bottom.

Also Read

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget