-orange.svg?style=for-the-badge){kind=icon}
You as Mendix Developer have full control, all the widget does at a basic level is add and remove class names. There are 2 types of class names a Hook- and a Edit- class name.
-
Hook Class Names : Are used to know where that element is in the dom.
Scroll Body Class Nameto know where the scroll part of the app is.Header Class Nameis used to know where the fixed header is.React On Class Nameis used to know where elements are to affect on scroll.
-
Edit Class Name: Is added or removed from its corresponding
Hook Class Name Element.When the Scroll index is greater than the Threshold:
Collapse Header Class Nameis added toHeader Class NameReact Class Name to Addis added toReact On Class Name
When the Scroll index is less than the Threshold:
Collapse Header Class Nameis removed fromHeader Class NameReact Class Name to Addis removed fromReact On Class Name
You can then style the elements using scss nesting to be very specific. *Note If you do very fancy stuff your scss file has a chance of becoming messy
Individual Page - Add the Widget anywhere on the page *Recommend top of page
| Type | Info | |
|---|---|---|
| Header Class Name | string |
Class Name given to the header of app that does not contain the body eg: region-topbar or region-header |
| Scroll Body Class Name | string |
Class Name given to the main body of app that does not contain the header eg: region-content or region-content-main |
| Collapse Header Class Name | string |
Class Name given to the collapsed header |
| Threshold | integer |
Number in pixels to scroll before triggering collapse of header |
| Expand On Threshold | boolean |
Should header expand immediately if user scrolls up (false) or should it wait till the threshold is reached (true) |
| Smart Compensator | boolean |
Because of the way Mendix handles scroll, the Widget tries and adds back the the Height you loose when the user scrolls. As this to non trivial it could fail, it is also dependent on the way you implement your "collapsing" so to compensate you can turn this on and off, if it is causing unforeseen issues. |
| Animation Speed (ms) | boolean |
This is the speed you set your animation to in ms, *This is not doing the animation |
| React On Class Name | integer |
Non Styled Class Name you added to elements you want a class name to be added once the header collapses. This is used for identity |
| React Class Name to Add | string |
Class Name that is added to React On Class Name once the header collapses and removed when expanded, you can here hid or show or style an element once the header is collapsed |
Mendix handles scroll in apps and because of this custom implementation we try to compensate for it.
Example:
If the Viewport is 1000px and your header before scroll is 200px the body will be 800px. After the user scrolls
and hits the threshold you collapse your header to 150px, the body size was calculated on page load and thus it is
still 800px and now leaves you with 50px of whitespace at the bottom of the page.
The smart compensator calculates header size in expanded and in collapsed state, It then finds the difference between
those two values and adds that back to the body. So in the example above it will calculate a 50px difference and then
add that to the body to make it 850px. When the user scroll up and the header expands the smart compensator will
remove the 50px.
The issue comes in because you will use animations the header is only in collapsed state after lets say 500ms and thus
the smart compensator has to wait for the animation to finish before it can take the measurement and add it to the body.
Then if the user scrolls too quick to the end of the page before the smart compensator is done it can give strange
effects.
It is also recommended to use faster animations, recommended slowest of 1000ms with the smart compensator on.
Fast Scrolling causes Issue if Smart Compensator is on