Archived topic
Sticky element when scrolling like Cuberto
1 reply · Started by Thomas on July 1, 2021
Hello,
Sorry for my english, I'm french. I would like to know if its possible to make something like "featured project" on the website :
When you scroll, only the rectangle with projects sticks, but the text change on the left.
I have a intermediate level in JS and other things.
Here's what I do :
- I copy the HTML code from here and put it on my homepage
- Same CSS on the stylesheet
- I put the JS on hook with GSAP declaration, no problem
BUT as you can see on my website (private info)
My scroll is not working, when you scroll, it only scroll the part where I put HTML (you need to use the scrollbar, go under the red block to see what happens).
Is it possible to fix that ? And if it's yes, is it possible to "integrate" better at GenerateBlocks ? Like put class on Container Block or something like that.
Thanks a lot !
Thomas.
Hi Thomas,
Since you're using a JS library, (which likely disabled the scroll), I suggest checking their documentation if the library's init options have some sort of "disableScroll: false/true".
Is it possible to fix that ? And if it’s yes, is it possible to “integrate” better at GenerateBlocks ? Like put class on Container Block or something like that.
While you can try that, I'm not sure if GB's HTML structure is conducive to what the JS library needs.
Normally, JS libraries have this sort of structure:
<div class="container">
<div class="affected-element">
</div>
</div>While GB adds extra element wrapper for styling, like this:
<div class=".gb-container container">
<div class=".gb-inside-container">
<div class="affected-element">
</div>
</div>
</div>And that extra wrapper element may affect how the script works.
