Affix Header with children components not working

[PauloFavero]

What version of rsuite are you using?

5.9.0

What version of React are you using?

18.0.0

What version of TypeScript are you using (if any)?

4.6.3

What browser are you using?

Chrome

Describe the Bug

I have been trying to fix the Header of the Container Layout with the Affix component. With works perfectly when the Header does not have any children.

If the Header has a NavBar, for example, it gets messy after scrolling the page.

Expected Behavior

It would be expected that the header stays fixed at the top of the page independently if it has or does not have children components.

To Reproduce

To reproduce this behavior, you just need to put an Affix component around the Header like this example.

const instance = (
  <div className="show-fake-browser navbar-page">
    <Container>
        <Affix>
              <Header>
                <Navbar appearance="inverse">
                  <Navbar.Header>
                    <a className="navbar-brand logo">BRAND</a>
                  </Navbar.Header>
                  <Navbar.Body>
                    <Nav>
                      <Nav.Item icon={<Home />}>Home</Nav.Item>
                      <Nav.Item>News</Nav.Item>
                      <Nav.Item>Products</Nav.Item>
                      <Nav.Menu title="About">
                        <Nav.Item>Company</Nav.Item>
                        <Nav.Item>Team</Nav.Item>
                        <Nav.Item>Contact</Nav.Item>
                      </Nav.Menu>
                    </Nav>
                    <Nav pullRight>
                      <Nav.Item icon={<Cog />}>Settings</Nav.Item>
                    </Nav>
                  </Navbar.Body>
                </Navbar>
              </Header>
          </Affix>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Container>
  </div>
);
ReactDOM.render(instance);

[RamonPessoa]

I have the same problem

[PauloFavero]

Did someone have time to look into this issue?

Thanks

[simonguo]

I added the Affix wrapper for the Header in the example. The problem you mentioned was not found.

QQ20220614-152003-HD.mp4

[PauloFavero]

Hi @simonguo

Thanks for investigating this issue. I did some tests here and it appears when there a sidebar as well.