So, I was looking For Making A Block image, or extension sticky! But after searching a lot I found no solutions!!! what i have right now is?

This Image Block with Categories Under This

And I want whenever i start scrolling, I want my Tent Image sticky!! Like This One!

Okay, If this not possible forget about the categories. just make that tent sticky! which is a image block !!!

or give a good guideline for getting a sticky image header!!!

1 Answer 1


First, you should figure out whether you want sticky or fixed:

  • Sticky: Something is located in my page, but not at the top. When I scroll down, it will get stuck to the top of the page.
  • Fixed: Something is located at the top of my page and will always be stuck at the top of my page.

To do a proper sticky effect, you need both CSS and JS. To do a fixed effect, all you need is CSS. Based on the screenshot with the tent always at the top, I think you want a fixed effect.

The following should work:

In your layout.xml:

<block name="tent.image" template="Vendor_Module::tent.phtml">

In your tent.phtml:

<img class="fixed" src="tent.jpg">

In [theme_dir]/web/css/source/_extend.less

.fixed {
    position: fixed;
    top: 0;

And then be sure to flush your cache and your static files cache.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.