Comments (10)
Digging in, I think the issue has something to do with "stickyBitStart". Essentially that is smaller then it should be and as a result the js-is-sticky class gets added before the element is actually sticky.
from stickybits.
Dangβno fun!!!
@ishields, could you share some info so we can figure this out?
-
I made codepens for us to hack on in vanilla JS and 1 for jQuery.
-
Here's a gif showing that it appears to be working for me (not saying that it IS working for everyone π¬).
I'm here to help so let me know what I'm missing. ~Thanks again!
from stickybits.
Interesting. So I haven't replicated it yet in code pen because it requires a more advanced use case I think. Basically it seems like the calculation of stickyBitStart changes depending on your scroll position on the page. I put a console.log underneath the line
var stickyBitStart = this.el.getBoundingClientRect().top;
Then I refreshed the browser a couple of time with different scroll positions. Depending on my scroll position when I refresh, this value changes significantly. It is only correct when I'm scrolled to the very top of the page. Because this value is wrong, the classes are added at the wrong times (before or after the element becomes sticky)
I fixed this by using the jquery method offset().top "offset().top". This strategy produces a consistent number thats not based on where you are scrolled on the page. You also need to take into account the offset thats passed in. So this line became
var stickyBitStart = $(this.el).offset().top - (offset || 0)
And the last problem seems to be when developing responsive sites. If you change the width of the browser, the start and stop positions of these elements need to change too. As a result I think the calculations of stickyBitStart and stickyBitStop need to be dynamic. So in other words there will likely need to be a method to generate these numbers on the fly rather than set them as constant variables.
Thoughts?
from stickybits.
My initial thought is:
- Can you make a codepen to show the issue?
- Once I can see the issue too, can we make a codepen together and fix the issue? π
If you can make a codepen showing the issue, then I will work with you to make it work how we want.
I think/hope with the stickbits .cleanup
method, we can get your issue working perfectly. π
from stickybits.
@ishields, thanks for you notes. I'm going to cancel this issue.
Reach out if you have anymore notes/questions/ideas. π
from stickybits.
Hi @yowainwright, it still doesn't apply the js-is-stuck class in Firefox. I installed stickybits 1.3.5
from stickybits.
@wernerkrauss π Do you have link you can share? ...Or is the issue visible in demos? π
from stickybits.
@wernerkrauss I'm not seeing that issue here...?
https://codepen.io/yowainwright/pen/36449183ca18af18f3005734b0251769/
from stickybits.
Still, both classes are not applied here on our side.
from stickybits.
It seems we have to define scrollEl
as many elements do not bubble up the scrolle event to the window object by default.
from stickybits.
Related Issues (20)
- Sticky useStickyClasses odd behaviour HOT 8
- Position: fixed set on a sticky element early if scrollEl is used HOT 2
- Question: Add class with jquery to other element upon stick? HOT 1
- Initial position stuck? HOT 1
- An in-range update of eslint is breaking the build π¨ HOT 1
- How to use it in Hype HOT 1
- Override class and style application to manually control how they are applied HOT 1
- Angular example doesn't work with useFixed set to true HOT 1
- Using stickybits.js with webpack 4 HOT 1
- Use
- IE11 Issue HOT 3
- An in-range update of eslint-plugin-import is breaking the build π¨ HOT 2
- Stickybits should not add `position:absolute` after scrolling.
- Position absolute update breaks functionality HOT 8
- `noStyles` no longer applying `position` style attributes
- An in-range update of husky is breaking the build π¨ HOT 2
- Update method not computing scroll offsets
- empty style tag not removed from head on initialisation
- When "stuck" table headers are shifted one pixel to the right HOT 3
- Remove bottom position when element stuck to bottom
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stickybits.