Sticky Sidebar

Sticky Sidebar

A sticky sidebar keeps a column pinned in view while the taller neighbouring column scrolls. Canvas handles this with a .sticky-sidebar-wrap column and a .sticky-sidebar inner element.

Structure

Wrap the column that should stick with .sticky-sidebar-wrap, then place the pinned content inside .sticky-sidebar. The wrapper is a normal Bootstrap column, so add your col-* classes to it.

<div class="row">

    <!-- Long scrolling content -->
    <div class="col-lg-8">
        <p>Tall content that scrolls past the sidebar.</p>
    </div>

    <!-- Sticky column -->
    <div class="col-lg-4 sticky-sidebar-wrap mt-5 mt-lg-0">
        <div class="sticky-sidebar">
            <!-- This block stays pinned while the page scrolls -->
        </div>
    </div>

</div>

As a page sidebar

Combine it with the standard .sidebar layout so a widgetized sidebar sticks while the article scrolls:

<div class="row">
    <main class="postcontent col-lg-9">
        <p>Article content.</p>
    </main>
    <aside class="sidebar sticky-sidebar-wrap col-lg-3 order-lg-first">
        <div class="sticky-sidebar">
            <div class="sidebar-widgets-wrap">
                <!-- widgets -->
            </div>
        </div>
    </aside>
</div>

As a filter or nav column

The pattern also works for shop filters and vertical navigation lists that should follow the reader:

<div class="col-md-3 sticky-sidebar-wrap">
    <ul class="list-unstyled items-nav sticky-sidebar shop-filter">
        <!-- filter items -->
    </ul>
</div>

Options

• .sticky-sidebar-wrap: the outer Bootstrap column that defines the sticky area boundaries.
• .sticky-sidebar: the inner element that actually sticks.
• data-offset-top: optional attribute on the sticky element to set a top offset in pixels before it pins.
• data-offset-bottom: optional attribute to set a bottom offset where it unpins.

<div class="sticky-sidebar" data-offset-top="100" data-offset-bottom="60">
    ...
</div>

Tips

• The sticky column only pins while its neighbour is taller, so it naturally releases at the bottom of the shorter column.
• Add responsive spacing like mt-5 mt-lg-0 so the column has breathing room when it stacks on mobile.
• Use data-offset-top to clear a fixed header, and data-offset-bottom to stop the pin a little before the footer.
• Keep the pinned content shorter than the viewport height so the whole block stays visible while stuck.