repository·master·Indexed 25 days ago
https://github.com/abouolia/sticky-sidebarA pure JavaScript plugin for creating high-performance, smart sticky sidebars that handle various container sizes and scroll behaviors. Version 3.3.1 supports vanilla JavaScript and jQuery/Zepto, providing options for top and bottom spacing, container boundaries, and automatic dimension recalculation via ResizeSensor.js. It includes support for IE9+ with a polyfill and triggers custom affix events when the sticky state changes.
Sticky Sidebar can automatically detect when the sidebar or its container changes size if ResizeSensor.js is included in your project.
To enable this:
ResizeSensor.js before sticky-sidebar.js.resizeSensor option is enabled (it is enabled by default).If you do not include ResizeSensor.js, the plugin will still function, but it will not automatically detect size changes.
sticky-sidebar.js file directly and linking it in your project.The plugin triggers custom events on the sidebar element when its sticky state changes. These events allow you to run code when the sidebar becomes stuck or changes its type of affixation.
Event Names:
affixed.[type].stickySidebaraffix.[type].stickySidebarAvailable Types:
top (from VIEWPORT-TOP)bottom (from VIEWPORT-BOTTOM)container-bottom (from CONTAINER-BOTTOM)unbottom (from VIEWPORT-UNBOTTOM)Note: When the sidebar is in its normal position, the stickyClass is removed.
Sticky Sidebar supports all modern browsers and Internet Explorer 9+.
For IE9 support: You must include a requestAnimationFrame polyfill before the sticky-sidebar.js script.
To use Sticky Sidebar in a vanilla JavaScript project, ensure your HTML structure includes a container and a sidebar. It is highly recommended to use an inner wrapper for the sidebar content (e.g., .sidebar__inner) to avoid layout issues. If an inner wrapper is not provided, the plugin will attempt to create one with the class .inner-wrapper-sticky.
<!-- Required HTML Structure -->
<div class="main-content">
<div class="sidebar">
<div class="sidebar__inner">
<!-- Content goes here -->
</div>
</div>
<div class="content">
<!-- Content goes here -->
</div>
</div>
<script type="text/javascript" src="./js/sticky-sidebar.js"></script>
<script type="text/javascript">
var sidebar = new StickySidebar('.sidebar', {
topSpacing: 20,
bottomSpacing: 20,
containerSelector: '.main-content',
innerWrapperSelector: '.sidebar__inner'
});
</script>If you are using jQuery or Zepto, include jquery.sticky-sidebar.js instead of the standard sticky-sidebar.js. Ensure jquery.js is loaded before the plugin script.
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.sticky-sidebar.js"></script>
<script type="text/javascript">
$('#sidebar').stickySidebar({
topSpacing: 60,
bottomSpacing: 60
});
</script>When instantiating StickySidebar, you can pass an options object to customize its behavior.
| Option | Type | Default | Description |
|---|---|---|---|
topSpacing | Number or Function | 0 | Additional top spacing of the element when it becomes sticky. If a function, it receives the sidebar element as an argument. |
bottomSpacing | Number or Function | 0 | Additional bottom spacing of the element when it becomes sticky. |
containerSelector | String or false | false | CSS selector for the container that defines the boundaries of the sticky element. |
innerWrapperSelector | String | '.inner-wrapper-sticky' | Selector for the inner wrapper element. If not found, the plugin creates one. |
stickyClass | String or false | 'is-affixed' | CSS class applied to the sidebar when it is in a sticky state. |
resizeSensor | Boolean | true | Whether to use ResizeSensor.js to detect height changes in the sidebar or container. |
minWidth | Number | false | If the window width is below this value, the sidebar will revert to its normal (non-sticky) position. |
When initializing StickySidebar, you can pass an options object to control behavior:
| Option | Description |
|---|---|
topSpacing | Vertical spacing from the top when stuck. |
bottomSpacing | Vertical spacing from the bottom when stuck. |
containerSelector | The selector for the parent container that holds the sidebar and content. |
innerWrapperSelector | The selector for the inner wrapper of the sidebar (highly recommended). |
resizeSensor | Boolean indicating whether to use ResizeSensor.js (defaults to true). |
.isSidebarFitsViewport() method returns a boolean indicating whether the sidebar's height (plus any configured bottomSpacing) is smaller than the current viewport height. This is useful for determining if the sidebar can actually scroll within the viewport..destroy() method on your instance.StickySidebar class by passing the sidebar element (or its CSS selector) and an optional configuration object. The plugin automatically handles the creation of an inner wrapper to manage positioning and applies necessary inline styles and classes.