Sticky Header Component in Magento 2

Sticky Header Component allows keeping Header on the fixed top during the scrolling by the user. That is supported by Sticky, one of the popular effect you can set for the header in your website. With the sticky header component, it is easier for the better tracking. Specifically, as you go to the product management workplace, you will see the sticky header component:

Sticky Header

So how is the sticky header component created in Magento 2?

Magento 2 Sticky Header Component

  • The sticky is applied for the display of the grid with the configuration:
<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>
  • You can open the CMS page grid vendor\magento\module-cms\view\adminhtml\ui_component\cms_page_listing.xml to get more details
<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>
  • To change the template of the sticky header, you can use the following configuration:
<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>

By using the above settings, you will be able to activate the sticky header component on your Magneto 2 site. Thanks for your reading!



Next tutorial:

Module Development Series



Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
sticky
header
component

Module Development

Comments for Sticky Header Component in Magento 2

Please leave comments if you have any questions, feedbacks.

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

Shop By Brand

$99
3 reviews

People also searched for:

  • magento 2 sticky header component
  • fixed header magento 2
  • magento 2 fixed header
  • sticky header magento 2
  • Sticky Header Component in Magento 2