Theia Sticky Sidebar

A lightweight JavaScript (TypeScript) library that glues your website's sidebars (or any vertical column), making them permanently visible when scrolling up and
down. Useful when a sidebar is too tall or too short compared to the rest of the content. Works with virtually any design and supports multiple sidebars.

Check out some examples:

- 3 columns example
- 4 columns example
- Bootstrap 4 example
- Foundation example

Install

| Package Manager | Install Command |
|-----------------|---------------------------------|
| NPM | npm add theia-sticky-sidebar |
| Yarn | yarn add theia-sticky-sidebar |
| PNPM | pnpm add theia-sticky-sidebar |

Usage

Your website's HTML structure has to be similar to this in order to work:

``js


Note that the inner theiaStickySidebar divs are optional, but highly recommended.
If you don't supply them yourself, they will be created for you, but this can be problematic:
ads or iframes will be moved around and may be loaded twice.

For the above example, you can use the following code:

$3

`js



`

$3

`ts
import {TheiaStickySidebar} from "theia-sticky-sidebar/dist/theia-sticky-sidebar";

document.addEventListener('DOMContentLoaded', function () {
const tss = new TheiaStickySidebar({
elements: '.content, .sidebar',
additionalMarginTop: 30
});
});
`

$3

This example uses just one sidebar.

`tsx
import React, {useEffect, useRef} from "react";
import {TheiaStickySidebar} from "theia-sticky-sidebar/dist/theia-sticky-sidebar";

export const MyComponent = () => {
const sidebarRef = useRef(null);
const theiaStickySidebarRef = useRef();

useEffect(() => {
// Activate sticky sidebar once the component is mounted.
theiaStickySidebarRef.current = new TheiaStickySidebar({
elements: sidebarRef.current!,
additionalMarginTop: 30
});

// Gracefully remove the sidebar once the component is unmounted.
return () => {
theiaStickySidebarRef.current!.unbind();
};
}, []);

return

| Setting | Type | Description |
|------------------------------|-----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| elements | string \| HTMLElement \| Array | Required. Can be a simple string selector, like .my-sidebar, or .my-sidebar-1, .my-sidebar-2. Or, it can be a DOM element, like document.querySelector('.my-sidebar'). Or, it can be an array of DOM elements. |
| containerSelector | string | Selector for the sidebar's container element. If not specified, it defaults to the sidebar's parent. |
| additionalMarginTop | number | An additional top margin in pixels. Defaults to 0. |
| additionalMarginBottom | number | An additional bottom margin in pixels. Defaults to 0. |
| updateSidebarHeight | boolean | Updates the sidebar's height. Use this if the background isn't showing properly, for example. Defaults to true. |
| minWidth | number | The sidebar returns to normal if its width is below this value. Useful for responsive designs. Defaults to 0. |
| disableOnResponsiveLayouts | boolean | Try to detect responsive layouts automatically and disable the sticky functionality on smaller screens. More exactly, it detects when the container and the sidebar are moved one on top of the other, instead of showing up side-by-side. Defaults to true. |
| defaultPosition | string | The sidebar must have a non-static position, as the inner sticky-sidebar uses position: absolute. Defaults to relative. |

Development

If you want to work on this repository:

`bash
npm install
npm run dev
``

WordPress


Also available as a premium WordPress plugin that comes with a user-friendly admin panel
and supports a plethora of themes out-of-the-box.