Fixed Image With Scrolling Content
Maurin Müggler
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?
Ziaul Kabir
Accepted AnswerHello 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
Accepted AnswerThank 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
Accepted AnswerHello 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
Accepted Answerhttps://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
Accepted AnswerPlease, check this post: https://www.joomshaper.com/forum/question/36954
And let me know, Is that help or not?
Thanks,
Maurin Müggler
Accepted AnswerUnfortunentlyy 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!