# Mgento 粘性头部组件

**URL:** https://forum.magentochina.org/t/mgento-%E7%B2%98%E6%80%A7%E5%A4%B4%E9%83%A8%E7%BB%84%E4%BB%B6/827
**Category:** Magento 2.X
**Tags:** 开发, 教程
**Created:** [2020 年9 月 9 日 06:10 UTC](https://forum.magentochina.org/t/mgento-%E7%B2%98%E6%80%A7%E5%A4%B4%E9%83%A8%E7%BB%84%E4%BB%B6/827 "2020-09-09T06:10:36Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### 作者： ![Vicky](https://forum.magentochina.org/letter_avatar_proxy/v4/letter/v/b19c9b/32.png) [@Vicky](https://forum.magentochina.org/u/Vicky)
#### 发布日期： [2020 年9 月 9 日 06:10 UTC](https://forum.magentochina.org/t/mgento-%E7%B2%98%E6%80%A7%E5%A4%B4%E9%83%A8%E7%BB%84%E4%BB%B6/827/1 "2020-09-09T06:10:36Z")

</div>

粘性头部组件能够让用户在滚动页面的过程中，使网站的头部固定在整个页面的顶部，这就是 Sticky 支持的功能，同时也是网站头部最流行的效果之一。使用粘性头部组件，可以更轻松地跟踪页面。具体来说，比如当您进入到产品管理页面时，将会看到页面上面的粘性头部组件：

 ![image](https://forum.magentochina.org/uploads/default/original/1X/d9860acc3b9fe651a4376a919f27be2063b766b7.png)  
所以，如何在 Magento 2 中创建粘性头部组件？

### Magento 2 的粘性头部组件

- 通过使用以下配置，可以将粘性效果应用到 grid 的显示效果中

```auto
<container name="sticky">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
           <item name="toolbarProvider" xsi:type="string">...</item>
           <item name="listingProvider" xsi:type="string">...</item>
       </item>
   </argument>
</container>

```

- 打开 CMS 页面的 grid vendor\magento\module-cms\view\adminhtml\ui\_component\cms\_page\_listing.xml 获取更多详细信息

```auto
<container name="sticky">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
           <item name="toolbarProvider" xsi:type="string">cms_page_listing.cms_page_listing.listing_top</item>
           <item name="listingProvider" xsi:type="string">cms_page_listing.cms_page_listing.cms_page_columns</item>
       </item>
   </argument>
</container>

```

- 要更改粘性头部的模板，可以使用以下配置：

```auto
<container name="listing_top">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="template" xsi:type="string">ui/grid/toolbar</item>
           <item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
       </item>
   </argument>
</container>

```

通过使用上述设置，就可以在 你的 Magento 2 网站上启用粘性头部组件。感谢您的阅读！

## 本教程翻译自Mageplaza模块开发系列，其他内容请点击下面链接:

> [@Magento2模块开发中文教程索引](https://forum.magentochina.org/t/magento2%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E4%B8%AD%E6%96%87%E6%95%99%E7%A8%8B%E7%B4%A2%E5%BC%95/36):
>
> 本文翻译自mageplaza的Magento2模块开发教程,而且正在翻译中. 翻译也是非常好的学习方式，希望下列表中还有我们没有翻译，而你又想分享的内容,请发表文章之后，在下面附上地址。 如果觉得本站翻译得内容对您有帮助，又没有时间帮助翻译回馈社区.请打赏我们，您的支持是我们的动力: 转载说明:非常欢迎转载，但是必须保证文章的完整性并附上原文地址和翻译原文的地址，保证阅读者不会产生歧义. 目录索引: 索 引 中 文 原 文 1 [Magento2如何创建模块](https://forum.magentochina.org/t/Magento-2%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%95%99%E7%A8%8B/38)[How to Create Module in Magento 2](https://www.mageplaza.com/kb/how-create-hello-world-module-magento-2.html) 2 [控制器详解](https://forum.magentochina.org/t/Magento-2%E6%8E%A7%E5%88%B6%E5%99%A8%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/39)[Create Controllers](https://www.mageplaza.com/magento-2-module-development/how-to-create-controllers-magento-2.html) 3 [CRUD 模型](https://forum.magentochina.org/t/Magento2-CRUD%E6%A8%A1%E5%9E%8B%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88%E5%B7%A5%E5%8E%82%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/43)[CRUD Models](https://www.mageplaza.com/magento-2-module-development/how-to-create-crud-model-magento-2.html) 4 [视图层:块,布局和模板](https://forum.magentochina.org/t/%E8%A7%86%E5%9B%BE%E5%B1%82%E5%9D%97%E5%B8%83%E5%B1%80%E5%92%8C%E6%A8%A1%E6%9D%BF%E6%A8%A1%E6%9D%BF%E6%95%99%E7%A8%8B/50/1)[View: Block, Layouts and templates](https://www.mageplaza.com/magento-2-module-development/view-block-layout-template-magento-2.html) 5 [配置system.xml](https://forum.magentochina.org/t/%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6systemxml/55)[Configuration - System.xm…](https://www.mageplaza.com/magento-2-module-development/create-system-xml-configuration-magento-2.html)