Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LondonPete

Css does not work with locomotive library

Recommended Posts

I have the following CSS to scroll within a column, but if I include the locomotive library, even without using it, the CSS doesn't work, in fact, it seem like the second line is removed.

 

.sticky-section-wrapper .elementor-widget-wrap {
    display: block !important;
    position: sticky;
    top: 0;
}
.sticky-section-wrapper .sticky-section {
    position: sticky;
    top: 0;
}
 

The first line is included just for Safari,  but is found in Chrome, whereas the second line doesn't appear at all

 

Regards Pete 

Link to comment
Share on other sites

Hey @LondonPete, welcome to the forum! 💚
Can you provide a minimal demo? So we can help you with your issue. 🙂

Btw I don't understand what is the issue related with GSAP here. 

  • Like 1
Link to comment
Share on other sites

Sorry, https://test.hhhconsulting.co.uk/sticky-scrolling

Link to comment
Share on other sites

Is complicated for us to solve your issue in a full website. 
if you can provide us a minimal demo (Codepen or Sandbox) we can try to help you. But if the problem is related to LocomotiveScroll and not to GSAP there's not much we can do 😔

  • Like 2
Link to comment
Share on other sites

 

Since locomotive-scroll appears to have a special data-scroll-sticky attribute, my best guess would be that this is just a locomotive-scroll thing and position: sticky does not work withing locomotive-scroll's context as it would in a native-scrolling approach.

 

Maybe this thread here can help

 

 

 

 

As this doesn't look to be related to GSAP, maybe locomotive-scroll's issues section over on GitHub can help too.

 

https://github.com/locomotivemtl/locomotive-scroll/issues?q=sticky

 

But as Nico already mentioned; if you could create a minimal demo and it shows that this is related to GSAP, we'll be happy to help.

 

BTW:

Since you appear to be using ScrollTrigger; you could also recreate that sticky behaviour with a pinning ScrollTrigger.

 

  • Like 2
Link to comment
Share on other sites

I'm using a plugin that adds locomotive scroll and scroll trigger as a site wide option, not for particular pages. When I turn off locomotive scroll this page works. I'll look at the github link.

Link to comment
Share on other sites

@akapowl always have the solution, not only for GSAP but also for Locomotive Scroll! 😎

  • Haha 3
Link to comment
Share on other sites

When are you getting a company car from Locomotive Scroll @akapowl?

  • Like 1
  • Haha 3
Link to comment
Share on other sites

52 minutes ago, nico fonseca said:

@akapowl always have the solution

 

Ha, I wish I had  😅

 

22 minutes ago, Cassie said:

When are you getting a company car from Locomotive Scroll @akapowl?

 

I'm actually no advocate for locomotive-scroll, and I wouldn't even know where to park such a beast 😋

 

photo-1603640946281-851ccf60c886?ixlib=r

 

 

 

When it comes to smooth-scrolling, there are some pit-falls to avoid, that are the same across all/most libraries and/or approaches, though;

 

Like position: fixed elements not working the way you'd expect within the container that is being transformed because of the transforms on that container changing the context for the fixed position. I guess position: sticky falls in a similar/the same vein, as it can be seen as some sort of a special version of position: fixed maybe?

 

  • Like 2
  • Haha 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×