当页面太长时，侧边栏会随着滚动而消失，页面看起来就不那么整洁美观了。 所以本文将介绍如何使用粘性部件来避免这个问题。

创建一个新的粘性小部件#

首先，在 layouts/parials 文件夹下创建一个模板，我们以 layouts/partials/custom/sticky-info.html 为例。

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>

文件名 custom/sticky-info 可以随意改变，但我们建议使用一些更具体的名字，以避免以后覆盖主题的模板。 比如 custom、mywidgets。

然后使用 layouts/partials/hooks/sidebar-end.html 钩子来包含粘性模板。

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

粘性小部件应该是侧边栏的最后一个小部件，否则会出现奇怪的问题。

使现有的小部件变得粘稠#

每个小部件都会有一个独特的类名，这样我们就可以在所需的小部件上应用 CSS，这里我们以个人资料小部件为例。

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

我们需要指定order属性，使个人资料部件成为侧边栏的最后一个部件。