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
0.0.2
0.0.3
0.0.4
1.0.0
1.0.1
1.0.2
1.1.2
1.1.3
1.2.10
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
1.3.10
1.3.11
1.3.12
1.3.2
1.3.3
1.3.5
1.3.8
1.4.4
1.5.0
1.5.2
1.5.3
2.0.1
2.0.10
2.0.13
2.0.2
2.0.3
2.0.4
2.0.6
2.0.7
2.0.8
2.0.9
2.1.1
2.1.2
3.0.0
3.0.1
3.0.3
3.0.4
3.0.5
3.1.0
3.1.1
3.2.0
3.2.3
3.2.4
3.3.0
3.3.1
3.3.2
3.3.5
3.3.7
3.4.0
3.4.1
3.5.0
3.5.1
3.5.2
3.5.3
3.5.4
3.5.5
3.5.6
3.5.7
3.5.8
3.6.0
3.6.1
3.6.2
3.6.3
3.6.4
3.6.5
3.6.6
3.6.7
3.6.8
3.7.0
3.7.1
3.7.10
*** 3.7.11
3.7.2
3.7.3
3.7.4
3.7.5
3.7.6
3.7.7
3.7.8
3.7.9