Sticky scrolling effect with Gutenberg

[@annetravel5935]

I have learned more from your videos on Gutenberg than from Wordpress. I love your straight-forward approach. Thank you.

[@jamiewp]

thanks so lovely to hear. Thanks Anne :)

[@WineGiftBoxMaker]

Your channel should be sticky for everyone, great teachings

[@jamiewp]

Tks Scott :)

[@teachallaboutit]

This is really useful! I have a text to speech element on my lesson pages & this just solved the issue of needing to scroll up to pause. Thanks!

[@jamiewp]

Great to hear 😀

[@tomasnittner2765]

works beautiful and thanks much for the find! just one lottle detail which almost drove me crazy: you put ".stick" (that is dot stick) in the advanced section of the sticky-block. in the same section of the "stopping element you should just put "stick" (or whatever) WITHOUT the dot. then it does work great!

[@jamiewp]

Great , tks for letting me know Tomas 👍

[@IrynaBa-bh1rl]

thanks Thomas, it helped!

[@geraldheagney6038]

Great new block to me. Thank you.

[@jamiewp]

Great to hear!

[@bartosslajos]

Great, quality content!😀

[@michieltieleman9462]

I think I found a bug related to this. Not in the actual sticky block, but in the cover block. I've made a header: header>sticky>group>Columns>4 columns with a row in each with 1. Site logo 2. Nav menu 3. Login/out 4. Contact button. Reason for the columns is to stack them on top of each other on mobile. Reason for the rows inside the columns again is to center align the content within the columns. Underneath the header is a cover block with an image and transparent gradient overlay. As the page scrolls, the image from the cover block disappears behind the header/group block, but the gradient overlay on the cover block doesn't. Did you encounter this, and if so, would you know of a way to fix this behavior?

[@NinaMaria-gu4bz]

When scrolling down, the moment when my sticky image in the right column of the column block hits my sticky navigation block above, the image seems to "bounce" once. It gives the impression that the image has weak "harness" so to say. Is there a way to make manual scrolling seem smooth?

[@jamiewp]

can you share a link?

[@fabrictexture4767]

Hi, is this plugin slow down the website?? Looking Forward

[@jamiewp]

Nope it shouldn’t

[@mehmetzekidivan485]

Yapışmayan push up CSS kodu nasıl yazılır? Lütfen daha fazla ayrıntı verir misiniz?

[@onlineart.gallery979]

Hi Jamie. Is it possible to make this a product page template with WooBuilder?

[@jamiewp]

Hi, yes that's what i used in the demo :)

[@putonthewholearmorofgod1123]

Can this also make the header sticky?

[@jamiewp]

In my tests in didn’t work - however you can use position sticky css and that worked for me - I might do a tutorial on this 😊

[@putonthewholearmorofgod1123]

@@jamiewp That would be fine :-) Would you please also tell us how to create a simple header that works best with sticky-header feature. 😊

[@jonathanpalacios3108]

@Jamie Marsland That will be a good one...👌🏻

[@jesussaves8386]

This into :D i gave you sub just because of it ;)

[@jamiewp]

thank you :)

[@mehmetzekidivan485]

How to write non-sticky push up CSS code? Could you please give more details?

[@jamiewp]

Hi, could you clarify a little, please? What are you after ?

[@DesmondBold]

@@jamiewp you did not give the sticky push up CSS code you added to the bottom image where the item stops scrolling? where can we get that CSS code

[@StudioSEO]

paste this code in the column you want the sticky block to stop and it will work: shoe Stick gp-gutenbergpro-39532

[@StudioSEO]

@@DesmondBold paste this code in the column you want the sticky block to stop and it will work: shoe Stick gp-gutenbergpro-39532

[@dmtmak]

It didn't work for me @@StudioSEO

[@HaifengZhu-pn3uq]

This is cool

[@jamiewp]

🙏

[@senff]

Ooooooo thanks :)