Staff replied SP Page Builder

Fixed image with scrolling content

Asked by Maurin Müggler 1 year ago Last activity 1 year ago

I have two columnes (50/50). In the first one is text content and in the second one is an image. The image should be fixed (sticky image) when i scroll it should stay in the middle of the screen and only with in the section. How can i achive this?

4 replies

Ziaul Kabir Staff

1 year ago

Hello Maurin,

Thank you for reaching out to us. While we do not offer customization services, you can share your website URL and specify the section where you would like the changes to be made. Based on this information, I will do my best to provide you with clear instructions to assist you.

Please let me know if you have any questions or need further assistance.

Best regards,

Maurin Müggler Asked this

1 year ago

Thank you for your answer. very briefly, i have two columns in one i have a text. in the second column i have an image. i would like to keep the image fixed by scrolling down. the effect is called sticky image as far as i know. i tried to design the whole thing with html code but did not achieve it.

my template: https://webflow.com/made-in-webflow/website/Sticky-Project-Teaser-Image-Scroll-Animation

thanks for the support!

Ziaul Kabir Staff

1 year ago

Hello Maurin,

Thanks for your reply. You shared with us a Webflow site, which is a different CMS. Could you please share the URL of your website where you are using our product and trying to achieve this type of interaction, such as a sticky feature?

Thanks!

Maurin Müggler Asked this

1 year ago

https://swisstradinghub.ch/index.php?option=com_sppagebuilder&view=page&id=38

On my page you can see first some random stuff.

After the future boxes there is left a text (html) code and right a image. this image i would like to make a sticky image in the whole section the text (html) is.

If I scroll down and left the text (html) is changing the image should always be sticky until the section (text/html) ends.

I use the current newst version of joomla and the helix template.

Ziaul Kabir Staff

1 year ago

Please, check this post: https://www.joomshaper.com/forum/question/36954

And let me know, Is that help or not?

Thanks,

Maurin Müggler Asked this

1 year ago · edited

Unfortunentlyy it does not work!

So I created a new css file "custom.css" in my Template.

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

.sppb-column.position-sticky{
top: 110px;
height: fit-content;
}

My right Column has a min hight of 400px and my left columne (image) 150px.
The right column i added the css-class ".position-sticky".

Why does it not work?

please check my page with F12 comand..

in the bootstrap.min.css i found:
.position-sticky {
position: -webkit-sticky!important;
position: sticky!important
}

so what I need to do??

Thank you!

Maurin Müggler Asked this

1 year ago

I think i fixed it!

Problem was:
".position-sticky" ====> this should be "position-sticky"!

hahaha basic fault...

Ziaul Kabir Staff

1 year ago

Awesome.