Vanilla JS sticky header

Developer
Eli Fitch
Size
1,944 Kb
Views
129,536
  1. Vanilla JS sticky header Previews
  2. Vanilla JS sticky header HTML Codes
  3. Vanilla JS sticky header CSS Codes
  4. Vanilla JS sticky header JS Codes

How do I make an vanilla js sticky header?

What is a vanilla js sticky header? How do you make a vanilla js sticky header? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

Vanilla JS sticky header Previews
IQ Test

Vanilla JS sticky header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla JS sticky header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="hero"></div> <div id="header"></div> <div id="readout"></div>
</body> <script src="js/index.js"></script>
</body>
</html>

Vanilla JS sticky header - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
html { background-color: gray; height: 5000px;
}
.hero { height: 200px; background-color: blue; display: block;
}
#header { height: 75px; display: block; background: green; width: 100%;
}
#readout { background-color: white; position: fixed; z-index: 100; bottom: 0; right: 0; width: 200px; height: 50px;
}

Vanilla JS sticky header - Script Codes JS Codes

var h = document.getElementById("header");
var readout = document.getElementById("readout");
var stuck = false;
var stickPoint = getDistance();
function getDistance() { var topDist = h.offsetTop; return topDist;
}
window.onscroll = function(e) { var distance = getDistance() - window.pageYOffset; var offset = window.pageYOffset; readout.innerHTML = stickPoint + ' ' + distance + ' ' + offset + ' ' + stuck; if ( (distance <= 0) && !stuck) { h.style.position = 'fixed'; h.style.top = '0px'; stuck = true; } else if (stuck && (offset <= stickPoint)){ h.style.position = 'static'; stuck = false; }
}
Vanilla JS sticky header - Script Codes
Vanilla JS sticky header - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4
Size 1,944 Kb
Views 129,536
Do you need developer help for Vanilla JS sticky header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eli Fitch (elifitch) Script Codes
Name
Cube of cubes
Mars
Smiley guy
Slanty Button Mixin
Goodbye 2016
Node DC Animated SVG Logo
Neon slicey cube
Animated multi-line underline
3D Retro Wave Spin
Gradient Borders Mixin
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!