Hi. There is no settings for this, and most likely never will exist. But this is possible through CSS.

Why, I think that there will never be such settings? SP Page Builder works inside Component Area and can not affect the joomla template. The Joomla template is the main culprit that Position: Sticky does not work, but not SP Page Builder.

The presence of overflow (-x, -y): hidden, in the template, for any parent element destroy the operation of the Position: Sticky property.

For example, in Helix it is:

.body-innerwrapper {
    overflow-x: hidden;
}

In order to force Position: Sticky working at the global level you need to override this code in this way:

.body-innerwrapper {
    overflow-x: visible;
}

But this may cause a side effect in the form of horizontal scrolling when using animation and in some other cases.

Since SP Page Builder is designed to work in any templates and cannot affect their code, this option may not work for most templates. Therefore, the developer team is unlikely to implement it.

Elementor from your video creates its own page template. Therefore, it works there. But this approach is not very convenient in many more significant cases than using Position: Sticky. WordPress users complain of all these more important things which are not available due to constructive features of Elementor.

In addition, WordPress construction is different from Joomla. There are no templates and modules, there are Themes and plugins - that completely different construction.

Everywhere there are its pros and cons. And you need to choose that it is more important for you - some minor decoration opportunities or global functions.

You can try to use interections to achieve something similar as in the video.

And I repeat, you can make work Position: Sticky through CSS.

Hi,

Thanks Pavel for your kind information and suggestions also. And hwweb as its not possible right now but I will note it down so that DEV team may take care of it in near future

Thanks

Thanks Pavel for clearing up the original problem....

Then I will experiment with your tip:

.body-innerwrapper {
    overflow-x: visible;
}

If that does not help I will have to switch to www.webflow.io ...there it is very easy to implement these scroll effects even with separate triggers

Thanks + have a nice weekend Greetings Holger

Hi DEV team, can you intergate in the next Update from SP PAGEBUILDER the sticky position effect? Same Solution as here: https://www.youtube.com/watch?v=pQGPBCta4Ac :-)

Thats helps to build amazing animations :-) Regards Holger

I was just asked by our marketing team if we could implement this for landing pages on our site. It wouldn't even need to be the entire page moving... but just a section within the page scrolling up/down.

A solution to this would be a great addition to SP Page Builder... even you all need to build/certify (or suggest) some Joomla templates that will do something like this.

Our team mentioned how Apple has this all over their site. I know some of their work are videos where the scroll controls frame playback but this page has a good example of this part-way down where it talks about the thinness of the iMac: https://www.apple.com/imac-24/

The main navigation stays at the top (non-sticky/off-screen) while the section on thinness "sticks" and lets content scroll "backwards and forwards" (really up and down based off mouse scroll control).

I would think you all can add this within a section (row).

Hi, unfortunately the effectsection of SP Pagebuilder can not control lottie files with triggers :-( In Webflow this is possible within 3-4 clicks... Unfortunately the development team doesn't deal with these scroll effects :-( Not only Apple uses these effects. Have a look at the landingpages of DJI: https://www.dji.com/de/mobile/mavic-3?site=brandsite&from=homepage

Regards Holger

The DJI site is really nice! Looks like they're using both a controllable video/lottie file at the top and then animated HTML/CSS for the rest of the page.

I guess this could all be hard-coded but there's a reason we purchased SP Page Builder. ;-)

hi together, apparently the sticky position effect for scroll effects was not considered in version 4 either :-(

Is there maybe with manual css code the chance within a section to set certain content to position sticky?

Of course then as soon as a new section follows below the held content (with sticky) should be pushed out?

hi together, apparently the sticky position effect for scroll effects was not considered in version 4 either :-( Is there maybe with manual css code the chance within a section to set certain content to position sticky? Of course then as soon as a new section follows below the held content (with sticky) should be pushed out?

Hi.

Hmm... I explained in my post why the Position Sticky does not work and what needs to be done to make it works. The reason is in the template, not in Page Builder. It is not possible to add this to Page Builder as option, since in any third -party template there can be a code that prevents the work of the Position Sticky in Page Builder. Using Joomla, you use some kind of template. And you cannot get around it.

The Apple site and other similar sites are custom coding (no dependence on the template). Webflow is essentially also manual coding via visual interface (no dependence on the template). Page Builder works inside the template and depends on it.

Read about Position Sticky.

https://michaelmovsesov.com/articles/fix-css-position-sticky-not-working

The JoomShaper team cannot demand from everyone in the world of templates developers to make their code so that the Position Sticky worked in SP Page Builder. Page Builder is just a component. The template is a more significant part of the system. Extension developers should make their products so that they work inside most templates existing on the market.

Hello all,

I have entered the code under System/Site Template Styles/Flex - Default/Custom Code in Custom CSS. Any problems with effects I could not find so far.

.body-innerwrapper {
    overflow-x: visible;
}

I have also entered the following code in Custom CSS. In SP-PageBuilder I created an HTML-Addon and referred to the corresponding class under CSS-Class (see https://ibb.co/HV4Vt8R).

.navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
 overflow: auto;
}

Unfortunately the sticky effect does not work like this. What am I doing wrong?

Here is a link to my page: https://ars-langen.de/index.php/angebote/fahrten/englandfahrt. I want the menu to stay on the left side with the sticky effect always visible when scrolling.

Best Regards,

Andreas

Hi. In order for this to work the parent block should have a height reserve.

In your case, it will work with such a code.

#sppb-addon-wrapper-1682687389598 {
    position: sticky;
    top: 80px;
    z-index: 3;
}

Thank you very much, it works!

I have only one more question. When I click on a link in the navigation menu, the text slides to the appropriate place. However, the heading disappears behind the main menu.

I tried to solve the problem with spacing (padding top), which partially works. However, the spacing in the text is then also relatively large.

Is there a better solution?

Hi. Instead of using section ID for anchor link you can use Raw Html Addon. Place it on top of heading inside a section, set margins to 0, add code, something like this <div id="YOUR_ID_FOR_ANCHOR_LINK"></div>.

Then anable position relative or absolute in advanced tab and set up the Addon's position on the Y axis as you like, using negative values.

This is generally.

Specifically for your case:

Set margins to 0 and add the class to your all addons containing anchor links.

Replace all parts of the code that have this type

<h3 id="list-item-X"></h3>

to

<div class="YOUR_OWN_CLASS_FOR_ANCHOR_LINK" id="list-item-X"></div>

Use CSS

.YOUR_OWN_CLASS_FOR_RAW_HTML_ADDON {
    position: relative;
}
.YOUR_OWN_CLASS_FOR_ANCHOR_LINK {
    position: absolute;
    top: -50px;
}

Set top value as you like

Hi Andreas,

I want to do exactly the same as you did. Can you tell me how you succeeded ? Did you use the same module for fixed and sticky menu? What parameters did you add?

Thank you