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>&copy; 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!

All versions