Comments (7)
This is currently not supported, but if you create a top level overlay element with appropriate size of page and use 'pointer-events: none', and place your sticky inside that, it will be constrained as normal but inject the classes higher.
from stickybits.
Your use case sounds a lot like mine - using the library to trigger animations or reflow of content on scroll only and not so much for polyfill?
from stickybits.
Thanks. I'm probably over complicating things but, yes, your use case does sound similar. The polyfill is a bonus.
I have a couple of fixed global elements (a logo in the top left and a menu hamburger icon in top right) and a nav bar that sits at the bottom of the window on page load. I want the nav bar to become sticky when it hits the top and the global elements become 'part' of the nav bar by changing in colour and size (using CSS transitions).
As I need to know when js-is-sticky is applied to the nav bar I'm not sure how your suggestion would help?
from stickybits.
I may be an idiot. I can simply move my fixed elements to within the nav bar. I'll try that first!
from stickybits.
I see, that's difficult! I'm not sure that this is possible (as I understand your explanation) without some javascript shimming, sorry.
This would have been a good application of the :has
css selector that is not yet finalized, as you'd be able to do something like .parent:has(.js-is-sticky) > .ele2 { ... }
. If you find a polyfill/shim for :has
you may be able to do this elegantly, something like
https://www.ericponto.com/blog/2015/01/10/has-pseudo-class-parent-selector/
from stickybits.
If you don't need your header elements to flow relative to body content (i.e. you know their initial top position offsets or whatever), you can maybe put overflow: visible
on one parent container that encompasses the entire page with the pointer-events: none
trick, and then stickybits/style each sticky nav element individually as it becomes stuck into the header on scroll.
I think it sounds like you're trying to have content headers flow into the nav though?
from stickybits.
I hadn't heard of :has. Pity support is non-existent: http://caniuse.com/#search=%3Ahas. As you say, a polyfill for :has would be useful.
Regardless, I solved my problem by simply moving my fixed elements into the nav bar.
Thanks for your time and advice!
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.