Position sticky on module

Hi,

Thank you for the detailed explanation.

You don't need to override the grid by hand. Helix Ultimate has a built-in option that makes the sidebar column sticky:

1. Go to System → Site Template Styles → Gazette → Template Options → Layout.
2. In the row that holds the right sidebar, click the three dots (⋯) on the right column (#sp-right) and open Column Settings.
3. Turn on Position Sticky and save.
4. Clear the Joomla cache (System → Clear Cache) and your browser cache, then test.

When it's on, the column gets the inner-wrapper-sticky class and stays in view while you scroll through long articles. This only applies on desktop (992px and wider).

Please also remove the CSS overrides you added earlier (display: flex, height: 100%, overflow: visible !important and so on). They can conflict with the built-in sticky behaviour.

Notes:

• The option makes the whole right column sticky, not one module inside it. If you only want the ad to stick, the simplest setup is to put the ad module alone in that sidebar position, or last in the order.
• If the column sits under your sticky header, you can push it down with custom CSS (Template Options → Custom Code → Custom CSS). Adjust the value to match your header height:

@media (min-width: 992px) {
  #sp-right .sp-column.is-affixed .inner-wrapper-sticky {
    top: 100px !important;
  }
}

• If you don't see Position Sticky in Column Settings, your Gazette or Helix Ultimate version is out of date. Please update both to the latest version first.

If it still doesn't work after this, please share your site URL (and a temporary admin login in the private section, if possible) and we'll take a look directly.

Best regards,

Hi,

Glad the column option worked!

Yes, you can make only the ad module sticky with CSS. Two things stop position: sticky from working on a single module in Helix Ultimate:

1. Parent overflow. The template sets overflow-x: hidden on body and .body-innerwrapper. The browser then treats them as scroll containers, and that breaks sticky for anything inside them. Changing it to overflow-x: clip keeps the same look (no horizontal scrollbar), but sticky works again.
2. Column height. #sp-right already stretches to the height of the main content. The inner .sp-column wrapper doesn't, so the module has no room to slide. Giving it height: 100% fixes this.

Steps:

1. Turn off the column sticky: go to Template Options → Layout → right column (⋯) → Column Settings, switch Position Sticky off and save. If you leave it on, the JavaScript sticky will conflict with the CSS one.
2. Add a class to the ad module: go to Content → Site Modules → open your ad module → Advanced tab → Module Class, enter sticky-ad and save.
3. Add this CSS in Template Options → Custom Code → Custom CSS, or in your custom.css:

body,
.body-innerwrapper {
    overflow-x: clip;
}

@media (min-width: 992px) {
    #sp-right > .sp-column {
        height: 100%;
    }
    #sp-right .sp-module.sticky-ad {
        position: sticky;
        top: 100px; /* adjust to your header height */
        z-index: 1;
    }
}

4. Clear the Joomla cache and your browser cache, then test.

The other modules in the right sidebar will now scroll normally. Only the ad module sticks at 100px from the top, and it stops at the end of the main content. Please also remove any earlier overrides you added (display: flex, height: 100%, overflow: visible !important and so on) so they don't interfere.

Tips:

• Keep the ad module last in the sidebar position. A sticky element only stays inside its own column, so if it sits above other modules it will slide over them.
• If it still doesn't stick, right-click the ad and choose Inspect. Check that the module's wrapper shows class="sp-module sticky-ad". If the class shows up joined to another word, edit the Module Class field and add a space before sticky-ad.

If it still doesn't work, please share your site URL and we'll take a look.

Best regards,