Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with navbar hideOnPageScroll and subnavbar/list-groups #4253

Open
cyberbeat opened this issue Mar 15, 2024 · 0 comments
Open

Problem with navbar hideOnPageScroll and subnavbar/list-groups #4253

cyberbeat opened this issue Mar 15, 2024 · 0 comments

Comments

@cyberbeat
Copy link

cyberbeat commented Mar 15, 2024

When using the hideOnPageScroll Feature in combination with a subnavbar and/or list-groups, it does not work as expected:

  • above the subnavbar is an empty space (where the navbar is hidden)
  • the list-group-titles (position sticky) are also not on top

What I expect when navbar is hidden on page scroll:

  • subnavbar should also be hidden on scroll
  • list-group-titles should be sticky on top of the page

This is an example (see "store" subpage with items loaded):
https://codesandbox.io/p/devbox/sweet-lamarr-hvq5m7?workspaceId=36dfb8d7-565d-4fd8-9919-e9f1d23fdc4c

This is my css workaround, perhaps it would be better to add a page-level css-class for hidden navbar?

.page:has(> .navbar-hidden)  .list-group-title {
	top: calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height)));
}

.navbar-hidden {
	transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}
.navbar-hidden ~ .subnavbar {
	transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant