Get started with sticky-sidebar CDN

The MIT License (MIT) licensed

Sticky Sidebar library keeps webpage elements stationary, visible during scrolling.

Tags:
  • sticky
  • affix
  • fixed
  • sidebar
  • javascript
  • jquery

Stable version

Copied!

How to start using sticky-sidebar CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with sticky-sidebar CDN - cdnhub.io</title>
    <style>
        #sidebar {
            width: 300px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            overflow-y: auto;
        }
    </style>
    <script src="https://cdn.cdnhub.io/sticky-sidebar/3.3.1/sticky-sidebar.min.js"></script>
</head>
<body>
    <div id="content">
        <h1>Main Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus tellus nibh sit amet mauris. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus tellus nibh sit amet mauris.</p>
    </div>
    <div id="sidebar">
        <h2>Sidebar</h2>
        <p>Sidebar content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus tellus nibh sit amet mauris.</p>
    </div>

    <script>
        const content = document.getElementById('content');
        const sidebar = document.getElementById('sidebar');

        StickySidebar.add(sidebar, {
            topSpacing: 64 // adjust this value based on your top navigation or other elements
        });

        window.addEventListener('resize', () => {
            StickySidebar.update();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions