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>

All versions