Comments (6)
After some more testing I see that headroom-wrapper
gets an inline height to prevent the content underneath from jumping while switching from unfixed to unpinned.
Regardless, it would be nice if headroom recalculated its height.
from react-headroom.
+1
Looking at it, it does resize the header in the componentDidUpdate() function.
My use case is a collapsing menu on mobile. When they hit the collapse button, the header shrinks.
The problem I'm facing is that componentDidUpdate remeasures the header instantaneously, and doesn't give it time for the animation to finish. If I call this.forceUpdate() on a timeout, the header janks back to the correct size.
from react-headroom.
@rusi Here's my temporary fix:
When resizing the window, I execute setHeaderHeight
which gets the height of my actual header element. I put it in the state of my component and then pass that in Headroom's wrapperStyle
prop. Hope that works for you! (You can probably debounce this to improve performance, but here's a very barebones version.)
Note: I use disableInlineStyles
as I have my own transitions and styling for Headroom.
componentDidMount() {
this.setHeaderHeight.bind(this);
window.addEventListener('resize', this.setHeaderHeight.bind(this));
}
setHeaderHeight() {
const headerHeight = this.header.clientHeight;
this.setState({ headerHeight });
}
render() {
const { headerHeight } = this.state;
return (
<Headroom
disableInlineStyles
wrapperStyle={headerHeight}
>
<header ref={(ref) => { this.header = ref; }}>
…
</header>
</Headroom>
);
}
@KyleAMathews What do you think?
from react-headroom.
@JLongley componentDidUpdate only sets a new height according to the following: // If children have changed, remeasure height.
I'm not changing any children for my responsive styles. I only update some padding and font-sizes, which obviously changes the height of my header and subsequently would have to set a new height on headroom.
from react-headroom.
@JLongley I am having the exact same issue. Were you able to find a good solution to this problem?
from react-headroom.
+1
from react-headroom.
Related Issues (20)
- Parent prop and ComponentWIllUnmount HOT 2
- Please add a Changelog.md or similar HOT 4
- not working HOT 1
- upTolerance not working HOT 4
- Possible reopen header when the mouse pointer covers the old header area. HOT 1
- Changing content of headroom
- Show hidden header on 'focus-within' HOT 1
- Override style
- × TypeError: Object.assign requires that input parameter not be null or undefined HOT 1
- Gatsby page jumps to top when scrolling down (caused by react-headroom)
- Financing
- Glitch in safari mobile HOT 9
- Safari scroll bouncing causes white space to appear HOT 18
- Surport umd module in CDN
- Manual 'reset' HOT 1
- How to change z-index HOT 1
- "onUnfix" is not a correct name.
- Error: You may need an appropriate loader to handle this file type... HOT 1
- Super expression must either be null or a function, not undefined HOT 2
- Headroom not working with Chakra UI
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 react-headroom.