When the page is too long, the sidebar will disappear with scrolling and the page will not look as neat and beautiful. So this article will introduce how to use sticky widgets to avoid this problem.

Create a New Sticky Widget

First of all, create a partial under the layouts/parials folder, let’s take layouts/partials/custom/sticky-info.html as example.

1<div class="row card component position-sticky" style="top: 84px;">
2    <div class="text-center py-3 px-1">
3        MY STICKY WIDGET
4    </div>
5</div>

The filename custom/sticky-info can be changed at will, but we recommend using some more specific names to avoid overriding the theme’s partials later. Such as custom, mywidgets.

Then use the layouts/partials/hooks/sidebar-end.html hook to include the sticky partial.

1{{- partial "custom/sticky-info" . }}

The sticky widget should be the last widget of the sidebar, otherwise, strange problems can occur.

Make an Existing Widget Sticky

Each widget will have a unique class name, so that we can apply CSS on a desired widget, here we take the profile widget as an example.

1.sidebar {
2    .profile {
3        position: sticky !important;
4        top: 84px;
5        order: 5;
6    }
7}

We need to specify the order property to make the profile widget become the last widget of sidebar.