material-components-web
material-components-web copied to clipboard
[Top App Bar] scrolling bug
Bug report
Steps to reproduce
- Go to Top appbar Standart
1.1 Disable height
.top-app-bar__frame
- Shrink the window to show the scroll bar
- Scroll down
- The top app bar is gone. ok!
- Enlarge the window so that the scroll bar disappears. The top app bar remained unchanged.This is bug.
I am using code like this, at the moment:
window.addEventListener('scroll', () => {
var element = document.querySelector('body');
var position = element.getBoundingClientRect();
// checking whether fully visible
if(position.top >= 0 && position.bottom <= window.innerHeight) {
$(topAppBarbar.root).animate({top:0}, 'fast');
or
topAppBar.root.style.top = "0";
}
});
Actual behavior
Expected behavior
Screenshots
Your Environment:
Software | Version(s) |
---|---|
MDC Web | 8.0.0 |
Browser | Chrome/Opera |
Operating System | Windows 10 |
Additional context
Possible solution
Can you provide the actual versus expected behavior, along with screenshots and a Glitch/Codepen demo?
- In the Result window, scroll down to the end
- Enlarge the result window so the scroll bar disappears
Step 1
Step 2
Step 3
Thanks for the Codepen and repro steps! This does seem like a bug, adding to our backlog.
Hi - is there any further update on this? I notice this still happens with version 12. If you make a window small and scroll down, followed by enlarging the window to remove the scrollbar, you will lose the top app bar.
Hi - is there any update on this bug?