sticky-state | high performant module making native position : sticky | Frontend Framework library
kandi X-RAY | sticky-state Summary
kandi X-RAY | sticky-state Summary
StickyState adds state to position:sticky elements and also polyfills the missing native sticky feature. Dependency free, pure Javascript for IE9+. Today's browsers do not all support the position:sticky feature (which by the way is being used (polyfilled) on pretty much every site you visit) - moreover the native supported feature itself comes without a readable state. Something like a:hover => div:sticky to add different styles to the element in its sticky state - or to read the state if needed in JavaScript. Unlike almost all polyfills you can find in the wild, StickyState is highly performant. The calculations are reduced to a minimum by persisting several attributes. In some cases you also need to know in which direction the user scrolls - for example if you want to hide a sticky header when the user scrolls up. if you set the scrollClass property of the options StickyState will add your choosen classNames to the element when it is sticky and scrolling. As a standalone Library its 6.75kb gzipped.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Sticky state constructor
- Creates an instance of StickyState .
- Canvas .
- find module name
- Inherit one class into another
- Returns the result of this method if it doesn t exist
- Check if a constructor is a function
- interpolate the default module
- Define properties on an object .
- Define a number
sticky-state Key Features
sticky-state Examples and Code Snippets
Community Discussions
Trending Discussions on sticky-state
QUESTION
I'm trying to make the position: sticky and display: flex properties work on Internet Explorer 11.
It works great on Chrome, Firefox, and Edge, but, surprise surprise; it doesn't work on Internet Explorer 11.
...ANSWER
Answered 2019-Jan-29 at 15:09According to caniuse.com position: sticky is not supported in IE11 and display: flex have partial support because lots of bugs.
I don't have much experience with StickyState but I use StickyBits and it works just fine.
EDIT:
QUESTION
I'm migrating a Angular 1.5.X app to Angular 4. In my App I use Angular Ui-Router Sticky State https://github.com/ui-router/sticky-states to avoid lose the content of my view when I made a navigation in some views of my APP but when I try to use this functionality in ng-router2 I can't find it. https://ui-router.github.io/ng2/tutorial/helloworld.
Some one know some router with similar function to Sticky State in Angular2+ or use the ui-router-ng2 to emulate the Sticky State.
...ANSWER
Answered 2018-Feb-05 at 07:28I found this answer on internet I cant remember the web but the solution is not mine.
QUESTION
I am using ui-router 1.0.0-beta.3, angular 1.5. So far, ui-router is awesome!
I have a root state, with some child states so far, but I noticed switching between siblings (children of the same root parent) causes complete recreation of the state I transition/go to.
I'd like to keep the scope variables around because, in my app, users may toggle some buttons, enter dates, etc, then maybe switch to another state, do something, and switch back but now all their partial work is gone. I'd also like the option to be able to destroy DOM for "inactive" states since in practice some of the states can get pretty large or users might create a lot of DOM so I'd like to keep the DOM as light as possible for some states.
I understand that ui-router-extras sticky-states feature is exactly this! And I could use the $state.includes function to target when I want to destroy DOM on some components. However, it seems ui-router-extras does not work with ui-router 1.0.0-beta.3. The author did make a port for the newer ui-router, but the release is in typescript and I am not sure how to compile that into a single js file. See: https://github.com/ui-router/sticky-states/issues/4
Perhaps I need a solution that does not use sticky-states --- any ideas? I was thinking of using a service to cache the scope values, and indeed read some other SO answers to that affect. This means that, per component, I'd need to handle which scope values to cache, etc. This is definitely a possibility, but I am wondering if anyone has any other techniques or knowledge about ui-router such that maybe there is another way to accomplish what I am after: cached controller/scope on transition change.
...ANSWER
Answered 2017-Mar-28 at 22:23After reading the author's typescript source code (which was a pleasure, very well-written code) from:
https://github.com/ui-router/sticky-states/blob/master/src/stickyStates.ts
I decided to migrate it to my own service in javascript, which would be compatible with ui.router 1.0.0-beta.3. By the way, ui.router 1.0.0-beta.3 is available at:
https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js
My approach was: because 1.0.0-beta.3 appears to not have the onCreate transition hook, I would decorate the $transitions.create function itself. To do this, I needed to inject a lot of helper functions and the core functionality of sticky states into the decoration. So I made the StickyStatesUtil provider to do this for me.
The migration consists of 2 parts: (1) a module called sticky-states-util, which creates the StickyStatesUtil provider, as well as a useful service for checking if a state/state-name is inactive, and an inactiveEvent, which, if set to a value, will cause $rootScope to broadcast a json map of inactive state-names for anything in the app to consume. If not set, that is skipped. And (2), the actual config block in the angular app that injects $provide and uses that to decorate the $transitions service with a new "create" function.
Since a couple others are in the same spot as me, I made this code available on github:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install sticky-state
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
