Get started with floating.js CDN
Apache-2.0 licensed
Floating.js: Lightweight library for scroll-linked element positioning.
Tags:- floating
- hearts
- element
- infinite
Stable version
Copied!
How to start using floating.js CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/floating.js/2.7.4/floating.js"></script>
<script src="script.js"></script>
</head>
<body>
<button id="my-button">Floating Button</button>
<div id="sticky">Sticky content</div>
<script>
const button = document.getElementById('my-button');
const config = {
top: 20,
left: 20,
width: 'auto',
height: 'auto',
borderRadius: 5,
padding: '10px 20px',
backgroundColor: '#4CAF50',
color: 'white',
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.3)',
zIndex: 100,
offset: 15,
opacity: 0.8,
display: ['none', 'none', 'block'],
className: 'button-floating'
};
const element = new FloatingUI(button, config);
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
element.show();
} else {
element.hide();
}
});
</script>
</body>
</html>