How can I make the content of the column sticky?

Support
#1

Hi,

I am trying to replicate some of the effect from https://stories.google/ website (desktop version).
Is there a way to make a content of the column sticky and not to scroll until the content of the other column is fully scrolled up? Can someone point me to the right direction please?

Regards
Marcin

#2

Hello Marcin,

Thanks for writing to us.

The features that you want, it would require custom development. I would suggest you consult a developer who can assist you with your concern or you can avail our service called One, where the customization questions are answered.

Please note that we don’t provide custom development support. It is out of the support scope.

Thanks for understanding

#3

@prakash_s thanks for your reply.
There are so many useful tips and solution provided on this forum which go beyond the standard and the Themeco team is always keen to give us awesome suggestion how to get stunning results with the theme. I did not realize that what I try to achieve this time might require complex development and the custom CSS would not be enough.

Regards
Marcin

#4

Hello Marcin,

Please understand that what you really have in mind requires a bit more customization including a JS and CSS code depending on the setup of your site. Please take a look Q2W3 Fixed Widget to make the widget sticky instead.

As this is really something which is not related to our theme code and is related to customization and extra functionality it is out of our support scope naturally and the plugin suggestion was the try from our part to be helpful regarding this issue.

We highly suggest that you research to implement such a functionality from here

Thank you for your understanding.

#5

@ruenel thanks for the tip. While the Q2W3 Fixed Widget plugin is an interesting solution it only works halfway for me. It does not recognize the end of the section where I put the widget area element.
I will look for another solution as I am almost sure it should be possible to achieve the result with a right css/js code combination.

Regards
Marcin

#6

Hey Marcin,

There is no doubt that what you need can be achieved with custom code or a 3rd party plugin. :slight_smile:

#7

@christian I would just need to understand why ‘position: sticky’ is greyed out in css editor and is being ignored wherever I add it. Interestingly, when I inspect the page it is present but simply does not work. ‘position: fixed’ works fine and as expected. I can’t figure out what else is controlling the behaviour?

#8

Hey Marcin,

Position sticky won’t work in our theme out of the box because of overflow is hidden in the body. If that is technical for you, please learn the behavior of position sticky here https://www.w3schools.com/howto/howto_css_sticky_element.asp. We cannot provide further technical information for general web development topics.

Please find a plugin that uses JS to stick elements. You need to consult with a developer for this if you’re not sure what to use.

Hope that helps and thank you for understanding.

#9

Hi Christian,

Thanks for pointing into right direction! I have manged to put together few lines of JS and CSS code. I was able to achieve satisfying result using position:fixed instead of position:sticky.

Regards
Marcin

#10

Glad to hear that, Marcin.

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.