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

Offset calculation quirk with expanding navigation menu/header #51

Open
enoversum opened this issue Oct 25, 2018 · 0 comments
Open

Offset calculation quirk with expanding navigation menu/header #51

enoversum opened this issue Oct 25, 2018 · 0 comments

Comments

@enoversum
Copy link

Sweet Scroll works quite reliably on Desktop, also in horizontal mode. Trouble arises when you use the vertical mode and a navigation (e.g. on mobile) where the navigation expands on click of a navigation button, and obviously hides again after clicking a navigation item.
Even though the header might have a fixed height that doesn't change when navigation pops out, Sweet Scroll uses the height of the content of the specified header element rather than the height of the actual header element. This leads to wrong offsets, especially if you use a full-screen mobile navigation.

How to reproduce:
Have a fixed-height #header (say: 120px) and a button to open the navigation.
Navigation expands to parts or the whole screen after hitting the navigation button, though the height of the container ('#header') remains the same (see Dev Tools).
Click a navigation element, and Sweet Scroll doesn't take into account the header element, but its content, i.e. if the menu spans the whole height, it for some reason stops the viewport height before the actual div, so the element scrolled to isn't visible.

I was able to circumvent it by using a negative offset option using the fixed-header height and setting the 'body' as header option, though it's not too beautiful I assume.

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