Get started with headhesive CDN
MIT licensed
Headless library allows rendering dynamic content on server-side before client-side delivery.
Tags:- header
- head
- sticky
- banner
- navigation
- nav
- scroll
Stable version
Copied!
How to start using headhesive CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with headhesive CDN - cdnhub.io</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/headhesive/1.2.4/headhesive.min.js"></script>
</head>
<body>
<header class="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to Headhesive Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
<button id="sticky-footer-btn">Show sticky footer</button>
</main>
<footer id="sticky-footer" class="sticky-footer">
<p>© 2023 Headhesive Example. All rights reserved.</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('.header');
const footer = document.querySelector('#sticky-footer');
const btn = document.querySelector('#sticky-footer-btn');
Headhesive.init();
Headhesive.scrollOnAction('#header', header);
Headhesive.scrollOnAction('#sticky-footer-btn', footer, {
top: '100%',
class: 'sticky-footer-active'
});
btn.addEventListener('click', () => {
footer.classList.toggle('sticky-footer-active');
});
});
</script>
</body>
</html>
Copied!
Copied!