When scrolling down the page, the main-nav component slowly eases to the top of the screen on desktop browsers, as well in mobile emulation. But, on an actual mobile device, the main-nav jumps around erratically.
On desktop, window.addEventListener('scroll', function() {}) is called continuously for every pixel scrolled, but mobile devices don't run the listener until the user has actually stopped scrolling completely. The only two ways around this that I've found:
- Get rid of the scrolling function, and just make the header and main-nav fixed.
- Use animations to mimic scrolling
When scrolling down the page, the main-nav component slowly eases to the top of the screen on desktop browsers, as well in mobile emulation. But, on an actual mobile device, the main-nav jumps around erratically.
On desktop,
window.addEventListener('scroll', function() {})is called continuously for every pixel scrolled, but mobile devices don't run the listener until the user has actually stopped scrolling completely. The only two ways around this that I've found: