Jump to content
Search Community

Css does not work with locomotive library

LondonPete test
Moderator Tag

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

 

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

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.
×
×
  • Create New...