Get started with stickybits CDN

MIT licensed

StickyBits is a lightweight library that enables creating and managing sticky elements on a webpage.

Tags:
  • stick
  • fixed
  • sticky
  • position
  • navigation
  • nav
  • dom
  • simple
  • javascript
  • stuck
  • waypoint
  • scroll
  • stickyheader
  • stickynavigation
  • fixedheader

Stable version

Copied!

How to start using stickybits CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with stickybits CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="https://cdn.cdnhub.io/stickybits/3.7.11/stickybits.min.js"></script>
    <style>
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background-color: #f3f3f3;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .sticky.sticky-top {
            background-color: #fff;
        }

        .animate-fadein {
            animation: fadein 0.5s;
        }

        @keyframes fadein {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <header class="sticky" id="my-sticky-header">
        <h1>Sticky Header</h1>
        <p>Scroll down to see the header stick to the top.</p>
    </header>
    <main>
        <h2 class="animate-fadein">Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc eget bibendum laoreet, nisi lacus venenatis nisl, vel bibendum mi lorem non mauris.</p>
        <h2 class="animate-fadein">Section 2</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Nullam id felis et ipsum bibendum ultrices.</p>
        <h2 class="animate-fadein">Section 3</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed commodo, magna quis lacinia ornare, quam ante bibendum ipsum, nec sollicitudin sapien turpis et leo.</p>
    </main>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        Stickybits.add("#my-sticky-header");
    });
</script>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions